How to hide jinja auto-generated forms using javascript?

Question

I'd like to know how to hide auto-generated forms when the window loads using javascript. I attempted to hide all of them using the code below.

window.onload = function() {
        document.getElementById("replyForm").style.display = "none";
}

function reply(this) {
        document.getElementById("replyForm").style.display = "block";
}

function closeReplyForm(this) {
        document.getElementById("replyForm").style.display = "none";
}

What the code above is supposed to do is to hide all the forms on page load and open one when a button is clicked. I'm making a comment section and want the forms to work the same way they do with Disqus. Unfortunately, the code I've written only hides the last form in the page. All the auto-generated forms above the last one are visible. How do I solve this?

Here is what the structure of my code looks like

{% for comment in all_comments %}
<article class="mx-lg-2 mb-lg-3 pt-lg-2" >
      <img src="profile-pic">
      <p>comment</p>
</article>

<div id="replyForm" style="margin-left:80px; margin-top:25px">
     <form method="POST" action="">
        <fieldset class="form-group">
            {% if form.body.errors %}
            {{ form.body(class="form-control form-control-lg is-invalid") }}
            <div class="invalid-feedback">
                {% for error in form.body.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
            {% else %}
            {{ form.body(class="form-control form-control-lg") }}
            {% endif %}
        </fieldset>
        <div class="form-group">
            {{ form_reply.submit(class="") }}
            <button type="button" onclick="closeReplyForm(this)" class="btn btn-secondary px-lg- 
             5">Cancel</button>
        </div>
    </form>
</div>
{% endfor %}

<script type="text/javascript">
window.onload = function() {
        document.getElementById("replyForm").style.display = "none";
}

function reply(this) {
        document.getElementById("replyForm").style.display = "block";
}

function closeReplyForm(this) {
        document.getElementById("replyForm").style.display = "none";
}
</script>

Answer 1

The issue here is you are using the same id for form.

One way to handle this problem is to append an index with id in for loop

<div id="replyForm-{{ loop.index }}" style="margin-left:80px; margin-top:25px">

And then in Js, you can get form from this

Instead of hiding all forms after they are loaded, you can hide my all by default.

in css

.hidden-form{
    display: none    
}

then add this class to the form.

Answer 2

Replying to myself after some research. You can start by giving them a unique class name that will be used to identify them and then adding jquery.

$('.replyForm').hide();

then when the button is clicked the code below will open a specific form based on its unique ID (not the class name)

$('#replyForm-12').show();