Почему id получает предыдущее значение?

Проблема в следующем, есть код по которому я изменяю записи в базе данных. Реализую через ajax Вычисляю id товара по которому был совершён клик, и формирую path = '/' + id, если перезагружать страницу всё работает хорошо, а если подряд изменять несколько товаров, то id товара сразу берётся из предыдущего значения, а потом из того по которому был совершён клик. Пример:

1. Кликаю на товар у которого id 6, в функции getEditData вычисляется id товара, получаем 6, идёт запрос в базу, всё изменяется отлично.

2. Далее, без перезагрузки страницы кликаю на другой товар у которого id = 7, вычисляется - id = 7, отправляется 2 запроса, 1 - с id 6, потом с id = 7. Никак не могу понять из за чего это происходит, помогите пожалуйста.

Клиентский код: Форма

<div class="page-edit">
  <p class="close">x</p>
  <form method="put" action="" id="the-edit-form">
    <table class="edit-table" cellpadding="5">
      <tr>
        <td class="label" valign="top">Name</td>
        <td valign="top">: <input type="text" name="NAME" value="" required="required"></td>
      </tr>
      <tr>
        <td class="label">Price</td>
        <td>: <input type="number" name="PRICE" value="" required="required" pattern="[A-Za-z0-9]{1,20}"></td>
      </tr>
      <tr>
        <td class="label">Rating</td>
        <td>: <input type="number" name="RATING" value="" step="0.1" min="1" max="5" required="required" pattern="[A-Za-z0-9]{1,20}"></td>
      </tr>
      <tr>
        <td class="label"></td>
        <td>
          &nbsp; <input type="submit" name="submit" value="send">
          <input type="button" name="cancel" value="cancel" class="cancel">
        </td>
      </tr>
    </table>
  </form>
</div>

JS

function getEditData(event) {
  let currentRow = $(event.target).closest("tr").find('td'),
    currentTh = $('.table thead').find('th'),
    dataRow = {},
    id = '';
  for (let i = 1; i < currentRow.length - 1; i++) {
    $("table.edit-table input[name='" + currentTh[i].textContent + "']").val(currentRow[i].textContent);
    (dataRow[currentTh[i].textContent] = currentRow[i].textContent);
  }
  //определяю id записи по которой был клик
  id = currentRow[0].textContent;
  //my stop
  $('#the-edit-form').submit(function(event) {
    $.ajax({
      //Подставляю полученный id из 
      url: "/" + id,
      type: "put",
      data: $("#the-edit-form").serialize(),
      success: function(res) {
        $('.page-edit, .backpopup').fadeOut();
        $('#update').removeClass('denial').addClass('success').html("Data have been updated successfully");
        return false;
      },
      error: function(xhr, status, error) {
        $('#update').removeClass('success').addClass('denial').html("Data haven't been updated");
        showErrors(xhr);
      }
    });
    event.preventDefault();
  });
}
function openEdit(event) {
  if ($(event.target).hasClass('edit', 'open')) {
    getEditData(event);
    $('.page-edit').popup();
  } else {
    $('.page-data').popup();
  }
}

основная таблица

<p id="update"></p>
<table class='table'>
    <caption>TABLE</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICE</th>
            <th>RATING</th>
        </tr>
    </thead>
    <tbody>
        {{#each data}}
            <tr>
                <td>{{id}}</td>
                <td>{{name}}</td>
                <td>{{price}}</td>
                <td>{{rating}}</td>
                <td>
                    <p class="edit" onclick="openEdit(event)">Edit</p>
                    <p class="delete" onclick="deleteUser({{id}})">Delete</p>
                </td>               
            </tr>
        {{/each}}
    </tbody>
</table>
 <div class="backpopup"></div>
 <div class="err-area"></div>