Javascript，X-Editable仅更新第一个提交的数据，而不更新第二个提交的数据

Question

I have a modal window, that I fill dynamically. It opens for every row in a table after clicking a button. Here is an example:

<!-- The Modal -->
<div id="callModal" class="callModal">
     <!-- Modal content -->
    <div class="modalCall-content">
      <div class="modalCall-header">
        <span class="closeModal">&times;</span>
        <h2 id="nameOfCalled">Modal Header</h2>
      </div>
      <div class="modalCall-body">
        <p class="shortNoteOfLeadClass" id="shortNoteOfLead" style="font-size:25px;"></p>
        <p>There will be statuses, notes and last call info...</p>
      </div>
      <div class="modalCall-footer">
        <h3><button type="button" class="btn btn-danger">End Call</button></h3>
      </div>
    </div> 
</div>

This is how I fill the form:

// Get the modal
var modal = document.getElementsByClassName('callModal')[0];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeModal")[0];

// When the user clicks on the button, open the modal
function callThisTel(telID) {
    var leadName = document.getElementById("leadName_"+telID).textContent;
    var leadDescript = document.getElementById("leadDescript_"+telID).textContent;
    var assignedTo = document.getElementById("leadAssignedTo_"+telID).getAttribute("data-title");
    var currentProfile = document.getElementsByClassName("staff-profile")[0].getAttribute("alt");
    document.getElementsByClassName("shortNoteOfLeadClass")[0].setAttribute("data-pk", telID);

    document.getElementById("nameOfCalled").textContent = leadName;
    document.getElementsByClassName("shortNoteOfLeadClass")[0].textContent = leadDescript;
    modal.style.display = "block";
    $.fn.editable.defaults.mode = 'inline';
    $('.shortNoteOfLeadClass').editable({
        url: '<?php echo base_url('changeData.php'); ?>',
        pk: telID,
        type: 'text',
        title: 'Change description'
    });
}

But the problem is, that every time the modal opens, it works good. All the data fills in without any error. All texts are as they are in the table. All the PK change in the modal and when I edit/save text it works good. But after I submit the form second time, it changes only the first "pk" I was submitting at the first place. But not the new ones, that are updated every time I open the modal.

Answer 1

Update: now it works as it suposed to work, but, only if I put:

$('.shortNoteOfLeadClass').editable("destroy");

Right before:

document.getElementsByClassName("shortNoteOfLeadClass")[0].setAttribute("data-pk", telID);