Javascript возвращает один и тот же id для каждого итерируемого элемента в html

У меня есть сайт, который я создал с помощью Django, где каждый посетитель может оставить свое сообщение или нажать кнопку "нравится" на любом комментарии. Я хотел бы показать, сколько раз комментарий понравился пользователю. Поскольку каждый комментарий уникален, я думаю получить доступ к атрибуту comment_id, который я написал в html-части. Затем я использую простую js-функцию для получения id. Проблема в том, что хотя html показывает уникальный id для каждого комментария, Javascript все равно возвращает тот же самый id, то есть id первого комментария, который был написан на странице. Кто-нибудь может подсказать мне, где моя ошибка в этом случае? Заранее благодарю за помощь.

мой код на js: function likeButton(){ let el = document.getElementById("chat-icon-thumbsup") alert(el.attributes["comment_id"].value) };

мой html-код, который в цикле перебирает записи "комментарий" из таблицы данных во фреймворке Django: {% for comment_ in comments %} <strong> {{ comment_.name }} - {{ comment_.date_added }} <button><i comment_id="{{ comment_.comment_id }}" id="chat-icon-thumbsup" class="fa fa-fw fa-thumbs-up" title="like this comment" onclick="likeButton()"></i></button> {{ comment_.nr_of_likes }} <br/> </strong> {{ comment_.body }} <br/> {% endfor %}

изображение 1: здесь вы видите, когда я проверяю элементы DOM, он извлекает различные "comment_id" введите описание изображения здесь изображение 2 и изображение 3: каждая кнопка, нажатая в строке комментария, оповещает об одном и том же id, который равен 16 введите описание изображения здесь введите описание изображения здесь

Я попытался загуглить любую возможную такую же проблему, но никаких решений не нашел

В HTML ID должен быть уникальным на каждой странице. Поэтому JS будет возвращать только первое найденное поле с таким ID. Вы должны использовать имя класса, которое определяет ваше поле, например, так:

<i id="comment_{{ comment_.comment_id }}" class="fa fa-fw fa-thumbs-up chat-icon-thumbsup" ....>

Тогда вы можете использовать document.getElementsByClassName("chat-icon-thumbsup"), есть причина, почему это называется getElementById в единственном числе, а не getElementsById

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