Использование одного модала для всех записей javascript

Я пытаюсь отправить id объекта, который мы выбрали для редактирования в действии формы.

 let edit_buttons = document.querySelectorAll(".edit-modal");

  for(var i = 0; i < edit_buttons.length; i++) {
    edit_buttons[i].addEventListener("click", function(e) {
    console.log(`${this.getAttribute("data-id")}`)
    console.log(`{% url 'users:edit' pk=1 %}`)
    document.querySelector("form").setAttribute("action", `{% url 'internal-users:edit-product' pk=${this.getAttribute("data-id")} %}`);
    })
  }
  <tr>
    <td class="border-0 size-13 text-gray-dark">
      <button class="btn btn-gray text-gray size-13 edit-modal"  data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
    </td>
  </tr>

  <tr>
    <td class="border-0 size-13 text-gray-dark">
      <button class="btn btn-gray text-gray size-13 edit-modal"  data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
    </td>
  </tr>
{% endfor %}


<form method="POST" action="">
  {% csrf_token %}
  <input type="hidden" id="object_id">
  
</form>

Итак, если мы выбираем первый вход для редактирования, я хочу, чтобы действие формы было /users/1/edit/

Если я пытаюсь добавить с помощью javascript, я получаю следующую ошибку

Could not parse the remainder: '${this.getAttribute("data-id")}' from '${this.getAttribute("data-id")}'

Если кто-то может мне помочь, я буду очень рад, спасибо заранее!

Делегат

document.querySelector("#myTable tbody").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-modal")) {
    document.getElementById("postForm").action = `someurl?id=${tgt.dataset.id}`;
    console.log(document.getElementById("postForm").action)
  }
})
<table id="myTable">
  <tbody>
    <tr>
      <td class="border-0 size-13 text-gray-dark">
        <button class="btn btn-gray text-gray size-13 edit-modal" data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
      </td>
    </tr>

    <tr>
      <td class="border-0 size-13 text-gray-dark">
        <button class="btn btn-gray text-gray size-13 edit-modal" data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
      </td>
    </tr>
  </tbody>
</table>


<form method="POST" id="postForm" action="">

</form>

Вернуться на верх