如何使用javascript循环遍历动态元素

呈现页面时，会显示不同数量的动态加载的评论。
如果用户在会话中并且用户是评论的作者，则显示编辑评论的按钮。

{% for u in user %}
    {% if u.id == comment.user_id and u.id == session['user_id'] %}
        <span role="button" class="change-button">Править</span>
    {% endif %}
{% endfor %}

评论显示在标签 - р。
此外，如果用户在会话中并且是评论的作者，则会加载带有文本输入的隐藏表单，当您单击“编辑”按钮时会显示该表单。

{% for comment in comments_list %}
    <p>{{ comment.text_comment }}</p>

    {% for u in user %}
        {% if u.id == comment.user_id and u.id == session['user_id'] %}

        <form action="/update/comment/{{ comment.id }}" method="post" class="hidden-form d-none">
            <input type="text" name="comment-change" value="{{ comment.text_comment }}">
            <button type="submit">Изменить</button>        
        </form>

    {% endif %}
{% endfor %}

表单隐藏在 css 中：

.d-none {
    display: none;
}

怎么用javascript做的，这样当你点击相应的“编辑”按钮时，会显示相应的隐藏表单？

我正在尝试这样：

$(document).ready(function() {
    $(".change-button").on('click', function(e) {
        $(".hidden-form").toggleClass("d-none")
    })
})

在此表单中，如果加载了多个评论，其作者是用户，那么当您单击任何“编辑”按钮时，所有隐藏的表单都会立即显示。