Как перебрать динамические элементы при помощи 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 %}

Комментарий отображается в тэге - р.
Так же, если юзер в сессии и является автором комментария, подгружается скрытая форма с текстовым input, которая появляется при нажатии на кнопку "Править".

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

В данном виде, если подгружается несколько комментариев автором которых является юзер, то при клике по любой кнопке "Править", отображаются сразу все скрытые формы.