title: Multiple editable fields one click using jQuery
body: <p>I'm trying to create a form that allows the user to edit it similar to the old style of Facebook profile editing. I can't figure out how to change all the elements in a section at the same time.  I can edit one at a time, but not all of them.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;section id="core"&gt;
          &lt;div class="profileinfo"&gt;
  
              &lt;div class="gear"&gt;
                  &lt;label&gt;Primary E-Mail:&lt;/label&gt;&lt;br /&gt;
                  &lt;span id="pemail" class="datainfo"&gt;myaddress@googlemail.com&lt;/span&gt;
                  &lt;a href="#" class="editlink"&gt;Edit Info&lt;/a&gt;
                  &lt;a class="savebtn"&gt;Save&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="gear"&gt;
                  &lt;label&gt;Full Name:&lt;/label&gt;&lt;br /&gt;
                  &lt;span id="first" class="datainfo"&gt;Johnny&lt;/span&gt;
                  &lt;span id="middle" class="datainfo"&gt;James&lt;/span&gt;
                  &lt;span id="last" class="datainfo"&gt;Appleseed&lt;/span&gt;
                  &lt;a href="#" class="editlink"&gt;Edit Info&lt;/a&gt;
                  &lt;a class="savebtn"&gt;Save&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="gear"&gt;
                  &lt;label&gt;Birthday:&lt;/label&gt;&lt;br /&gt;
                  &lt;span id="birthday" class="datainfo"&gt;August 21, 1989&lt;/span&gt;
                  &lt;a href="#" class="editlink"&gt;Edit Info&lt;/a&gt;
                  &lt;a class="savebtn"&gt;Save&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="gear"&gt;
                  &lt;label&gt;Address:&lt;/label&gt;&lt;br /&gt;
                  &lt;span id="address1" class="datainfo"&gt;123 Test Lane&lt;/span&gt;&lt;br /&gt;
                  &lt;span id="address2" class="datainfo"&gt;APT 104&lt;/span&gt;&lt;br /&gt;
                  &lt;span id="city" class="datainfo"&gt;Anywhere&lt;/span&gt;
                  &lt;span id="state" class="datainfo"&gt;FL&lt;/span&gt;
                  &lt;span id="zip" class="datainfo"&gt;55555&lt;/span&gt;
                  &lt;a href="#" class="editlink"&gt;Edit Info&lt;/a&gt;
                  &lt;a class="savebtn"&gt;Save&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="gear"&gt;
                  &lt;label&gt;Occupation:&lt;/label&gt;&lt;br /&gt;
                  &lt;span id="occupation" class="datainfo"&gt;Freelance Web Developer&lt;/span&gt;
                  &lt;a href="#" class="editlink"&gt;Edit Info&lt;/a&gt;
                  &lt;a class="savebtn"&gt;Save&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$(document).ready(function(){
  $(".editlink").on("click", function(e){
    e.preventDefault();
      var dataset = $(this).prev(".datainfo");
      var savebtn = $(this).next(".savebtn");
      var theid   = dataset.attr("id");
      var newid   = theid+"-form";
      var currval = dataset.text();
  
      dataset.empty();
  
      $('&lt;input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite"&gt;').appendTo(dataset);
  
      $(this).css("display", "none");
      savebtn.css("display", "block");
  });
  $(".savebtn").on("click", function(e){
      e.preventDefault();
      var elink   = $(this).prev(".editlink");
      var dataset = elink.prev(".datainfo");
      var newid   = dataset.attr("id");
  
      var cinput  = "#"+newid+"-form";
      var einput  = $(cinput);
      var newval  = einput.attr("value");
  
      $(this).css("display", "none");
      einput.remove();
      dataset.html(newval);
  
      elink.css("display", "block");
  });
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is an image similar to what I want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/AFsVy.png" alt="Old Facebook style"></p>
  
  <p>How do I build in the ability to edit each section?  Here is a <a href="http://jsfiddle.net/hhKZU/1/" rel="nofollow noreferrer">JSFiddle</a> for you to look at.</p>