Как скрыть и показать форму добавления комментария? django

При нажатии на 'div' с классом "post_user_comment_post" необходимо отобразить форму для добавления комментария. Что я и сделал. Но проблема заключается в том, что скрипт работает только для самого последнего опубликованного поста, а для остальных опубликованных постов скрипт не работает. Что я мог упустить?

Количество отображения комментариев:

  <div class="post_user_comment_post">
        <span class="count_comment">{{ post.comments.count }}</span>
    </div>

форма:

<form class="comment-form" id="comment-form" action="{% url 'add_comment' post_id=post.id %}" method="post">
    {% csrf_token %}
    <textarea name="content" class="user_comment_style" placeholder="Написать комментарий..." required></textarea>
    <button type="submit" class="img_sbmt"></button>
</form>

стиль:

.comment-form {
display: none;
}

JavaScript:

    document.addEventListener('DOMContentLoaded', function() {
    const commentPosts = document.querySelectorAll('.post_user_comment_post');
    const commentForm = document.querySelector('.comment-form');

    commentPosts.forEach(function(post) {
        post.addEventListener('click', function() {
            commentForm.style.display = 'block'; 
        });
    });
});

querySelector отбирает один первый попавшийся элемент в DOM.

Что бы работал ваш код так, как вы задумали, надо выбирать все элементы div(как вы уже делаете) и далее в каждом из них выбирать элемент и ему назначать нужное поведение.

Для удобства добавлен новый класс стилей.

В обработчике стоит проверка, что клик произошел по DIV, иначе любой клик по внутреннему элементу будет скрыть/отображать содержимое

document.addEventListener('DOMContentLoaded', function() {
    // берем все элементы с классом post_user_comment_post
    const divs = document.querySelectorAll('.post_user_comment_post');
    // Для каждого
    divs.forEach(function (elem) {
        // Берем элемент с классом comment-form
        const form = elem.querySelector('.comment-form');
        // Вешаем событие клика
        elem.addEventListener('click', function (event) {
            // Если клик был по DIV, то меняем видимость
            if (event.target.tagName === 'DIV') {
                // Если есть класс, добавить иначе удалить
                form.classList.toggle('comment-form-show');
            }
        })
    })
}
.comment-form {
  display: none;
}

.comment-form-show {
  display: block;
}
<div class="post_user_comment_post" id="div1">
  Тут можно тыкнуть
  <button id="btn1" class="comment-form">Форма видна</button>
</div>
<div class="post_user_comment_post" id="div2">
  Тут можно тыкнуть
  <button id="btn2" class="comment-form">Форма видна</button>
</div>
<div class="post_user_comment_post" id="div3">
  Тут можно тыкнуть
  <button id="btn3" class="comment-form">Форма видна</button>
</div>
<div class="post_user_comment_post" id="div4">
  Тут можно тыкнуть
  <button id="btn4" class="comment-form">Форма видна</button>
</div>
<div class="post_user_comment_post" id="div5">
  Тут можно тыкнуть
  <button id="btn5" class="comment-form">Форма видна</button>
</div>

Вернуться на верх