Popup-model is not opening in for loop (HTML)-CodePudding

I am trying to open a Pop up Model in for loop for every instance but the pop up model is opening for first instance But is not opening for other instances. I am using Django in template loop.

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

When I Place the JavaScript outside the for loop then it doesn't even work for one.

I have tried many times but it is still not working. Any help would be much Appreciated. Thank You

CodePudding user response：

Specify unique IDs to the modals and pass the id number to a single function to open form modals on click of their respective buttons.

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

CodePudding user response：

The id should be unique on a page, you should use class in loop instead of id,

Here I have updated your script that may help you

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