Внедрение JS в шаблоны Django

У меня есть список ингредиентов, для каждого ингредиента я хотел бы дать возможность удалить текущий ингредиент с помощью всплывающего окна, которое спрашивает пользователя: "Вы уверены, что хотите удалить это?". В случае подтверждения, я хочу, чтобы этот ингредиент был удален. В настоящее время, независимо от того, какой ингредиент я выбираю для удаления, всегда удаляется первый ингредиент в списке. Например, если список ингредиентов имеет вид ['сыр', 'салат'], я нажимаю удалить ингредиент под салатом, а он все равно удаляет сыр. Я никогда раньше не использовал javascript в шаблонах Django, я думаю, что мне нужно передать ингредиент в функцию openPopup, но я не уверен, как это сделать, любая помощь будет признательна! Я просмотрел документацию Django по использованию JS в шаблонах, но она не совсем ясна для меня. Как мне поступить? 

<div class="ingredient-container">
        {% for ingredient in ingredients %}
            <div class="ingredient">
                <b>{{ ingredient|title }}</b><br>
                <small><a href="{% url 'core:edit_ingredient' ingredient.id %}">Edit Ingredient</a></small>

        {% empty %}
        {% endfor %}

        <!-- This button opens the popup up to confirm deletion of the ingredient-->
        <button class="remove" type="submit" onclick="openPopup()">Remove Ingredient</button>

            <div class="popup" id="popup">
                <h2>Delete Confirmation</h2>
                <p>Are you sure you want to delete this?<br>{{ ingredient }}</p>
                <form method="post" action="{% url 'core:remove_ingredient' ingredient.id %}">
                    {% csrf_token %}
                <button class="remove" type="submit" name="done">Remove Ingredient</button>
                </form>
                <button class="cancel" type="submit" onclick="closePopup()">Cancel</button>
            </div>
        </div>

    <script>
      let popup = document.getElementById("popup");

      function openPopup() {
        popup.classList.add("open-popup");
    }

      function closePopup() {
        popup.classList.remove("open-popup");
    }

    </script>
    {% endblock %}

Я думаю, вам нужно передать url для удаления определенного ингредиента в js функцию и затем изменить действие формы соответствующим образом, что-то вроде:

<div class="ingredient-container">
    {% for ingredient in ingredients %}
        <div class="ingredient">
            <b>{{ ingredient|title }}</b><br>
            <small><a href="{% url 'core:edit_ingredient' ingredient.id %}">Edit Ingredient</a></small>
            <button class="remove" type="submit" onclick="openPopup({% url 'core:remove_ingredient' ingredient.id %})">Remove Ingredient</button>
        </div>
    {% endfor %}

    <div class="popup" id="popup">
        <h2>Delete Confirmation</h2>
        <p>Are you sure you want to delete this?<br>{{ ingredient }}</p>
        <form method="post" action="" id="remove-form">
            {% csrf_token %}
            <button class="remove" type="submit" name="done">Remove Ingredient</button>
        </form>
        <button class="cancel" type="submit" onclick="closePopup()">Cancel</button>
    </div>
</div>

<script>
  let popup = document.getElementById("popup");
  const del_form = document.getElementById('remove-form)

  function openPopup(url) {
      popup.classList.add("open-popup");
      del_form.action = url
  }

  function closePopup() {
      popup.classList.remove("open-popup");
  }
</script>
    ```
Вернуться на верх