Question

For some reason only the save button is showing up on the edit click…not sure why I am having problems with the cancel button…? Below is my code

$(".editlink").on("click", function(e){
    e.preventDefault();
      var dataset = $(this).prev(".datainfo");
      var savebtn = $(this).next(".savebtn");
      var cancelbtn = $(this).next(".cancelbtn");

      $(this).css("display", "none");
      cancelbtn.css("display", "block");
      savebtn.css("display", "block");     
});

This is my entire HTML page:

<div id="wrapper">
  <section id="core">
      <div class="profileinfo">

          <div class="gear">
              <label>Primary E-Mail:</label>
              <span id="email_address" class="datainfo"><?php echo $row['email_address'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>First Name:</label>
              <span id="first_name" class="datainfo"><?php echo $row['first_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Last Name:</label>
              <span id="last_name" class="datainfo"><?php echo $row['last_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>About Me:</label>
              <span id="about_me" class="datainfo"><?php echo $row['about_me'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Interests:</label>
              <span id="interests" class="datainfo"><?php echo $row['interests'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>
      </div>
  </section>

For some reason everything I have tried hasn’t worked. I can get one label/field to work, but when I have multiple like above in my html, the cancel button shows up.

Answer 1

You could try something like this:

var cancelbtn = $(this).parent().find('a.cancelbtn');

See working example