Onclick event updates table value once but never shows the updated value on second onclick event update

Question

I have a table that displays just a name of a person and I want to update the name displayed in a table by checking the checkbox of the name I want to change and showed it through a modal edit form. After putting an updated name in the name field of the modal edit form and click the update button, the name in the table will also be updated without page load. The first name update works but the second update never showed in the table. How can I make it work so that every change I made in the modal edit form will also be showed in the table without page load? Please help. Your help is so much appreciated. Thank you. Here are my codes and images.

Modal Edit Form

<div class="modal fade bs-example-modal-lg edit-entity-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
 <div class="modal-content" style="background-color: #343D46;">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: #fff;">&times;</span></button>
    <h2 style="padding:10px; color: #fff;">Post Activity Report Edit Form</h2>
        <address></address>
        <form class="form-horizontal par-form-edit" id="par-form-edit" style="background-color: #e2e2e2;" method="post" enctype="multipart/form-data">
          <fieldset>

            <div class="alert alert-dismissable alert-success alert-editName-success">
              <button type="button" class="close" data-dismiss="alert">×</button>
              <center><h4>Data successfully updated.</h4></center>
            </div>

            <address></address>

           <div class="form-group">
              <label for="inputName" class="col-lg-2 control-label">Name</label>
              <div class="col-lg-10">
                <input type="text" class="form-control" name="par[name]" id="name_edit" placeholder="Name" value="" style="width:260px;height:40px;" required>
              </div>
            </div>

             <div class="form-group">
              <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" class="btn btn-primary update-name">Update</button>
                <button class="btn btn-default">Cancel</button>
              </div>
            </div>

          </fieldset>
        </form>
</div>

Table that displays the name

<table class="table table-striped table-hover table-entity-contents" id="table-entity-contents">
      <thead style="background-color: #343D46; color: #fff;" id="notify_section">

        <tr>
          <th><input type="checkbox" class="radio_check_all par-checkbox" id="radio_check_all par-checkbox" value="" style="width:18px; height:18px;"></th>
          <th>Name</th>
        </tr>
      </thead>
  <tbody>

            <tr class="tbl-entity-row">
            <td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all par-id-checkbox' id='radio_check_all par-id-checkbox' value="1"></td>
            <td><?php echo "Jun"; ?></td>           
            </tr>  
  </tbody>
 </table>

Javascript for updating table

$(".btn-edit-name").click(function(e){
e.preventDefault();
var valArray = [];      

$("input:checkbox:checked").each(function(i){
  valArray[i] = $(this).val();
});

if( valArray > 0 ){

$('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').each(function() {

    $tr = $(this);
    $('td', $tr).each(function() {


    document.getElementById("name_edit").value = $tr.find('td:eq(1)').html();


        $(".edit-entity-modal").modal({show:true});        

        return false;
     });

     });
   } else{
   alert("Please select a record");
  }

 });


 $(".update-name").click(function(e){

   e.preventDefault();

   var Name = document.getElementById("name_edit").value;

   if( Name != "" ){

      var txt = "",
          entityId = "1";

              txt += "<tr class='tbl-entity-row'><td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";

              $('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').replaceWith(txt);

              $(".alert-editName-success").fadeIn(100);
              $(".alert-editName-success").delay(2000).fadeOut(800);

  } else{
     alert("Do not leave name field empty");
  }

 });

Modal Edit Form

Onclick update button and 1st name update

Onclick update button and 2nd name update back to original name

As you can observe, the second name update never change the name in the table also showed in background. It stays "Jun Apple" and should be back to original name "Jun". What is the problem of this?

Answer 1

Because in the 2nd time you don't have checked the checkbox, and you're updating the table with this line

$('#table-entity-contents tr.tbl-entity-row').filter(':has(:checkbox:checked)').replaceWith(txt);

which selects and updates the rows with checked checkboxes. Thus, you just need to change this line

txt += "<tr class='tbl-entity-row'><td><input type='checkbox' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";

to

txt += "<tr class='tbl-entity-row'><td><input type='checkbox' checked='checked' style='width:30px; height:20px;' class='radio_check_all entity-id-checkbox' id='radio_check_all entity-id-checkbox' value="+entityId+"></td><td>"+Name+"</td></tr>";