title: Inline Edit/Save/Cancel Using JQuery
body: <p>I am performing Inline Edit operations using Jquery. I have</p>
  
  <pre><code>Label Name   ------&gt;  Edit button
  </code></pre>
  
  <p>when i click on edit button label name will be replaced with input text box and edit button will be replaced with save and cancel buttons.</p>
  
  <pre><code> Input text   ------&gt;  save and cancel button
  </code></pre>
  
  <p>Currently i'm able do this for single div by giving Unique Ids to all buttons now i want to enhance it future say i'll create three divs with same class names for all label/edit/save/cancel buttons.</p>
  
  <p>i will use only unique Id for input_text and i will keep same class names for label/edit/save/cancel buttons. If i click on Div1 i should be able to update values for Div1 and if i click on Div2 i should be able to update Div2 and soon.</p>
  
  <p>Can somebody help me out in acheciving It Thanks</p>
  
  <p><a href="https://jsfiddle.net/qx69o1bd/18/" rel="nofollow">https://jsfiddle.net/qx69o1bd/18/</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!-- Label one --&gt;
  &lt;div&gt;
      &lt;label class="name"&gt;
          &lt;span&gt;Label 1&lt;/span&gt;
      &lt;/label&gt;
  
      &lt;input id='text_1' class='com_text' type='text' /&gt;  
  &lt;/div&gt;
  
  &lt;div&gt;       
      &lt;a href='#' class='edit'&gt;
          &lt;span&gt;Edit&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;button class='save' type='submit'&gt;Save&lt;/button&gt;
  
      &lt;button class='cancel' type='reset'&gt;Cancel&lt;/button&gt; 
  &lt;/div&gt;
  &lt;!-- Label one --&gt; 
  &lt;br/&gt;
  &lt;!-- Label two --&gt;
  &lt;div&gt;
      &lt;label class="name"&gt;
          &lt;span&gt;Label 2&lt;/span&gt;
      &lt;/label&gt;
  
      &lt;input id='text_2' class='com_text' type='text' /&gt;  
  &lt;/div&gt;
  
  &lt;div&gt;       
      &lt;a href='#' class='edit'&gt;
          &lt;span&gt;Edit&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;button class='save' type='submit'&gt;Save&lt;/button&gt;
  
      &lt;button class='cancel' type='reset'&gt;Cancel&lt;/button&gt; 
  &lt;/div&gt;
  &lt;!-- Label two --&gt;
  &lt;br&gt;
  &lt;!-- Label three --&gt;
  &lt;div&gt;
      &lt;label class="name"&gt;
          &lt;span&gt;Label 2&lt;/span&gt;
      &lt;/label&gt;
  
      &lt;input id='text_3' class='com_text' type='text' /&gt;  
  &lt;/div&gt;
  
  &lt;div&gt;       
      &lt;a href='#' class='edit'&gt;
          &lt;span&gt;Edit&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;button class='save' type='submit'&gt;Save&lt;/button&gt;
  
      &lt;button class='cancel' type='reset'&gt;Cancel&lt;/button&gt; 
  &lt;/div&gt;
  &lt;!-- Label three --&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(document).ready(function()
  {
      $('.com_text').click(function()
      {
          var com_text = $(this).attr('id');
      });
  
      //Edit
      $('.edit').click(function()
      { 
          $(this).hide();
          $('.name').hide();
          $('.save,.cancel').show();
          $(com_text).val($('.name').text().trim()); 
  
      });
  
      //Cancel
      $('.cancel').click(function()
      { 
          $(this).hide();
          $('.name,.edit').show();
          $('.save').hide();
          $(com_text).hide();
          $(com_text).val('');
  
      });
  
      //Save
      $('.save').click(function()
      { 
          var sname = $(com_text).val().trim();
  
          var dataobj = {};
          dataobj.sid = $(this).attr('data-id');
          dataobj.sname = sname.trim();
  
          $.ajax(
          {
              type:"POST",
              dataType:"json",
              url:"pages/demo.php",
              cache: false,
              data: dataobj,
              success:function(response)
              {   
                  $('.name').html(sname.trim());
                  $('.name,.edit').show();
                  $('.save,.cancel').hide();
                  $(com_text).hide();
                  $(com_text).val('');                                                            
              }
          });
      });
  });
  </code></pre>