Динамически получать значение определенного элемента из списка элементов с одинаковым идентификатором

Итак, я пытаюсь создать функцию звездного рейтинга, и я застрял на динамической установке значения из переменной. Я не хочу делать так, чтобы звезды были интерактивными. Я хочу, чтобы они были установлены или заполнены с использованием значения переменной.

Вот как я получаю звезды

<div>
    <span></span>
    <span class = "rating" data-rating = "0">
        <i class = "star" data-checked = "false" data-note = "1">&#9733;</i>
        <i class = "star" data-checked = "false" data-note = "2">&#9733;</i>
        <i class = "star" data-checked = "false" data-note = "3">&#9733;</i>
        <i class = "star" data-checked = "false" data-note = "4">&#9733;</i>
        <i class = "star" data-checked = "false" data-note = "5">&#9733;</i>
    </span>
    <span>
        <input class = "coach-id" hidden value = "{{ coach.id }}">
    </span>
</div>

Теперь моя проблема в том, что я генерирую этот блок кода n столько раз, сколько записей есть в моей базе данных. Это создает проблему, что каждый блок будет иметь один и тот же класс.

Я хочу иметь возможность устанавливать их динамически через переменную, специфичную для каждого блока. Это означает, что каждая запись в БД будет иметь столбец рейтинга, который будет значением звезд, соответствующим этой записи.

Прямо сейчас звезды интерактивны через следующий скрипт

const ratings = document.querySelectorAll('.rating');
const coach_id = document.querySelector('.coach-id').value;
ratings.forEach(rating =>
    rating.addEventListener('mouseleave', ratingHandler)
);
const stars = document.querySelectorAll('.rating .star');
stars.forEach(star => {
    star.addEventListener('mouseover', starSelection);
    star.addEventListener('mouseleave', starSelection);
    star.addEventListener('click', activeSelect);
});
function ratingHandler(e) {
    const childStars = e.target.children;
    for(let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (star.dataset.checked === "true") {
            star.classList.add('hover');
        }
        else {
            star.classList.remove('hover');
        }
    }
}

function starSelection(e) {
    const parent = e.target.parentElement
    const childStars = parent.children;
    const dataset = e.target.dataset;
    const note = +dataset.note; // Convert note (string) to note (number)
    for (let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (+star.dataset.note > note) {
            star.classList.remove('hover');
        } else {
            star.classList.add('hover');
        }
    }
}
function activeSelect(e) {
    const parent = e.target.parentElement
    const childStars = parent.children;
    const dataset = e.target.dataset;
    const note = +dataset.note; // Convert note (string) to note (number)
    for (let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (+star.dataset.note > note) {
            star.classList.remove('hover');
            star.dataset.checked = "false";
        } else {
            star.classList.add('hover');
            star.dataset.checked = "true";
        }
    }
    const noteTextElement = parent.parentElement.lastElementChild.children.item(0)
    noteTextElement.innerText = `Note: ${note}`;
    console.info(note);
    let url = `/coach/editRating/${coach_id}/${note}`
    window.location.href = url
    console.info(url)
}