X-Editable changes only the first submit "pk".

[htpasswd]

Hello. 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.

[htpasswd]

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);

But it doesn't work if I add:

span.onclick = function() {
    modal.style.display = "none";
    $('#shortNoteOfLead').editable("destroy");
    $('#DataTables_Table_0').DataTable().draw();
}

At the end of the script. Because I use next modal right after closing the first one. But it still doesn't destroy the previous pk if I use it when close the first modal. By all the settings, the second modal opens with new pk, but X-Editable still sends the first modal's pk.