Implementing JS in Django templates

I have a list of ingredients, for every ingredient, I would like to give the option to delete the current ingredient via using a popup that asks the user “are you sure they want to delete this?” If confirmed, I want that ingredient to be deleted. Currently, no matter which ingredient I choose to delete, it always the deletes the first ingredient in the list. For example, if the list of ingredients is [‘cheese’, ‘lettuce’], I click remove ingredient under lettuce, and it will still delete cheese. I’ve never used javascript in Django templates before, I think I need to pass the ingredient into the openPopup function, but I’m not sure how to do it, any help would be appreciated! I’ve looked at the Django docs for using JS in templates but it’s not crystal clear to me. How do I go about doing this?

<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 %}

Answer

I think you need to pass the url to delete a specific ingredient to the js function and then change the form action accordingly, something like:

<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>
    ```