I want to show a form onclick function for foreach post for a particular post id. I was trying like this but its not working.

 {% for post in posts %}



            <div post-id={{ post.id }} class=post-box

            w3-container w3-card-2 w3-white w3-round w3-margin><br>

            {# <img src=w3images/avatar6.png alt=Avatar class=w3-left w3-circle w3-margin-right style=width:60px> #}

            <span class=w3-right w3-opacity>{{ post.created }}</span>

            <h4>{{ user.name }}</h4><br>

            <hr class=w3-clear>

            <p><a href=/posts/{{ post.id }}>{{ post.title }}</a></p>

            {# <img src=w3images/nature.jpg style=width:100% class=w3-margin-bottom> #}

            <p>{{ post.description }}</p>

            <button type=button class=w3-button w3-theme-d1 w3-margin-bottom><i class=fa fa-thumbs-up></i>  Like</button>

            <button class=w3-button w3-theme-d2 w3-margin-bottom id=comment><i class=fa fa-comment></i>Comment</button>

            <div id=comment-form-{{ post.id }} style=display: none;>

                <textarea></textarea>

                <button type=button></button>

            </div>

        </div>



       {% endfor %}





<script>

      var postBoxes = document.getElementsByClassName('post-box')

       postBoxes.forEach(function (postBox) {

      var postId = postBox.getAttribute('post-id')

      postBox.onclick = function () {

        document.getElementById('comment-form-' + postId).style.display = 'block'

    }

})

 </script>