JQuery, Javascript button -

sorry vague title, couldn't think of how title question. i've made html/css table wherein placed edit button each row. pressing button transform text field text-input field there allowing user edit data inside; @ same time edit button transforms save button. after editing , user press save button , text-input field revert text field , save button edit button. it's not entirely working

this problem, after editing data inside, upon pressing save button, data inside deleted , replaced with: <input type= , outside text-input field is: " /> , save button remains is, "save" button , not "edit" button

here's script:

$(document).ready(function () {      // listen email edit button click     $("button#edit").on('click', function () {         // email inline edit button         var email = $(this).parent().siblings('td.email').html();         alert(email);          // change button edit save         $(this).attr('id', 'save-email').html('save');          // change email display input field         $(this).parent().siblings('td.email').html('<input type="text" id="user-email" value="' + email + '" />');     });      // listen email save button click     $("button#save-email").on('click', function () {          // new email inline save button         var newemail = $(this).parents('tr').find($('input#user-email')).val();         alert(newemail);          // change input field display         $(this).parent().siblings('td.email').html(email);          // change button save edit         $(this).attr('id', 'edit').html('edit');     }); });   

sorry wall of text.

the problem first handler 1 attached in script.

your javascript code executed when page ready.
@ moment first handler attached because there not yet element button#save-email. when click save, first handler executed again, not 1 think !

why don't create 2 distinct buttons , show 1 or other ?

<table>     <tr>         <td class="email">myemail@domain.com</td>         <td>             <button class="btn-edit">edit</button>             <button class="btn-save" style="display:none">save</button>         </td>     </tr>     <tr>         <td class="email">myemail@domain.com</td>         <td>             <button class="btn-edit">edit</button>             <button class="btn-save" style="display:none">save</button>         </td>     </tr> </table> 

javascript

// listen email edit button click $('.btn-edit').on('click', function() {      var $this = $(this),         $parentrow = $this.closest('tr');      // email inline edit button     var email = $this.parent().siblings('td.email').html();      // change button edit save     $parentrow.find('.btn-edit').hide();     $parentrow.find('.btn-save').show();      // change email display input field     $(this)         .parent()         .siblings('td.email')         .html('<input type="text" id="user-email" value="'+email+'" />'); });  // listen email save button click $('.btn-save').on('click', function() {      var $this = $(this),         $parentrow = $this.closest('tr');      // new email inline save button     var newemail = $(this).parent().siblings('td.email').find('#user-email').val();      // change input field display     $(this).parent().siblings('td.email').html(newemail);      // change button save edit     $parentrow.find('.btn-edit').show();     $parentrow.find('.btn-save').hide();  }); 

demo