Всплывающая модель не открывается в цикле for (HTML)

Я пытаюсь открыть Pop up Model в for loop для каждого экземпляра, но pop up model открывается для первого экземпляра, но не открывается для других экземпляров. Я использую Django в цикле шаблона.

template.html

{% for comment in comments %}

    <button id="ModelButton">Open Model</button>
    <div id="Model" class="flagModel">
        <div class="modal-content">
            <div class="modal-mod">
                <div class="container-fluid">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %} 
                            {{form}}
                            <input type="submit">
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
    var formModel= document.getElementById("Model");
    var formButton = document.getElementById("ModelButton");
    formButton .onclick = function () {
      formModel.style.display = "block";
    }
    window.onclick = function (event) {
      if (event.target == formModel) {
        formModel.style.display = "none";
      }
    }
</script>

{% endfor %}

Когда я помещаю JavaScript за пределы for loop, он не работает даже для одного.

Я пробовал много раз, но он все еще не работает. Любая помощь будет очень признательна. Спасибо

Определите уникальные идентификаторы для модалов и передайте номер идентификатора в одну функцию для открытия форм модалов при нажатии на соответствующие кнопки.

{% for comment in comments %}
    <button onclick="openModal({{forloop.counter}})">
        Open Model
    </button>

    <div id="Modal-{{forloop.counter}}" class="flagModel">
        <div class="modal-content">
            <div class="modal-mod">
                <div class="container-fluid">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %} 
                        {{form}}
                        <input type="submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<script>
    function openModal(id) {
        var formModal = document.getElementById(`Modal-${id}`);
        if (formModal) {
            formModal.style.display = "block";
        }
    }
    
    window.onclick = function (event) {
      if (event.target == formModel) {
        formModel.style.display = "none";
      }
    }
</script>

Идентификатор должен быть уникальным на странице, вы должны использовать класс в цикле вместо идентификатора,

Здесь я обновил ваш сценарий, который может помочь вам

{% for comment in comments %}

    <button class="ModelButton">Open Model</button>
    <div class="flagModel Model">
        <div class="modal-content">
            <div class="modal-mod">
                <div class="container-fluid">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %} 
                            {{form}}
                            <input type="submit">
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
    var formButton = document.querySelectorAll(".ModelButton");
    formButton.forEach(function(element) {
      element.addEventListener('click', function(eventObj) {
        var formModel = eventObj.currentTarget.nextElementSibling;
        formModel.style.display = "block";
        formModel.addEventListener('click', function(event) {
          eventObj.currentTarget.style.display = "none";
        });
      })
    });
    
</script>

{% endfor %}
Вернуться на верх