变量更新，但恢复为旧值

Question

我很确定我的问题出在var contact_id = this.id和#edit_contact_update函数上。

用户单击联系人的编辑按钮，然后弹出一个模块。它会正确加载联系人信息，所有更改都将保存到MYSQL并正确更新表。

问题是保存第一个联系人后是否选择另一个联系人进行更新。当您选择下一个联系人时，该模式将弹出正确的信息，但是当您进行保存并调用#edit_contact_update时，contact_id将永远不会在此功能下更新。其ID仍在先前的联系人下，因此会使用错误的信息再次更新先前的联系人。

$('.edit-contact').click(function(e) {
    // Populate the Edit Contact Modal
    var contact_id = this.id;
    alert("Inital ID = " + contact_id);
    $.ajax({
        url: "controller/client-view/contact-modale-mysql.php",
        type: 'post',
        data: {select_contact: contact_id},
        dataType: 'json',
        success:function(response){

            var len = response.length;

            for( var i = 0; i<len; i++){
                var first_name = response[i]['first_name'];
                var last_name = response[i]['last_name'];
                var position = response[i]['position'];
                var phone_number = response[i]['phone_number'];
                var email = response[i]['email'];
                var pin = response[i]['pin'];
            }
            document.getElementById("edit_contact_name").value = first_name + " " + last_name;
            document.getElementById("edit_position").value = position;
            document.getElementById("edit_phone_number").value = phone_number;
            document.getElementById("edit_email").value = email;
            document.getElementById("edit_pin").value = pin;
            alert("Updated 2 ID = " + contact_id);

            e.stopPropagation();
        },
        error: function (xhr, status, error) {
              alert(xhr.responseText);
        }
    });

    $('#edit_contact_update').click(function(e) {
      alert("Updated ID 3 = " + contact_id);

      // Saves any updates to the database
      var position = document.getElementById("edit_position").value;
        var phone_number = document.getElementById("edit_phone_number").value;
        var email = document.getElementById("edit_email").value;
        var pin = document.getElementById("edit_pin").value;
        alert("Updated ID 4 = " + contact_id);
      $.ajax({
        url: "controller/client-view/contact-modale-mysql.php",
        type: 'post',
        data: {update_contact: contact_id, contact_position: position, phone_number: phone_number.replace(/\D/g,''), email: email, pin: pin},
        dataType: 'json'
        })
              alert("position-" + contact_id);
            // Update the contact on the contacts tab after uploading to the database
          document.getElementById("position-" + contact_id).innerHTML = position;
          document.getElementById("number-" + contact_id).innerHTML = phone_number;
          document.getElementById("email-" + contact_id).innerHTML = email;
          document.getElementById("pin-" + contact_id).innerHTML = pin;

    });
  });

<!-- .modal -->
<form id="clientContactEditForm" name="clientContactEditForm">
  <div class="modal fade" id="clientContactEditModal" tabindex="-1" role="dialog" aria-labelledby="clientContactEditModalLabel" aria-hidden="true">
    <!-- .modal-dialog -->
    <div class="modal-dialog" role="document">
      <!-- .modal-content -->
      <div class="modal-content">
        <!-- .modal-header -->
        <div class="modal-header">
          <h6 id="clientContactEditModalLabel" class="modal-title inline-editable">
            <span class="sr-only">Contact name</span> <input type="text" class="form-control form-control-lg" id="edit_contact_name" disabled=""  required="">
          </h6>
        </div><!-- /.modal-header -->
        <!-- .modal-body -->
        <div class="modal-body">
          <!-- .form-group -->
          <div class="form-group">
            <div class="form-label-group">
              <input type="text" id="edit_position" class="form-control" placeholder="Position" required="" value="Position"> <label for="edit_position">Position</label>
            </div>
          </div><!-- /.form-group -->
          <!-- .form-group -->
          <div class="form-group">
            <div class="form-label-group">
              <input type="tel" id="edit_phone_number" class="form-control" placeholder="Phone Number" required="Phone Number" value=" "> <label for="edit_phone_number">Phone Number</label>
            </div>
          </div><!-- /.form-group -->
          <!-- .form-group -->
          <div class="form-group">
            <div class="form-label-group">
              <input type="email" id="edit_email" class="form-control" placeholder="E-mail" value="E-mail"> <label for="edit_email">E-mail</label>
            </div>
          </div><!-- /.form-group -->
          <!-- .form-group -->
          <div class="form-group">
            <div class="form-label-group">
              <input type="text" id="edit_pin" class="form-control" placeholder="Pin" value="Pin"> <label for="edit_pin">Pin</label>
            </div>
          </div><!-- /.form-group -->
        </div><!-- /.modal-body -->
        <!-- .modal-footer -->
        <div class="modal-footer">
          <button type="submit" id="edit_contact_update" class="btn btn-primary" data-dismiss="modal">Save</button> <button type="button" id="edit_contact_cancel" class="btn btn-light" data-dismiss="modal">Close</button>
        </div><!-- /.modal-footer -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</form><!-- /.modal -->