Javascript 从具有相同 id 的元素列表中动态获取特定元素的值

因此，我试图制作一个星级功能，但我一直坚持从变量中动态设置值.我不想让明星们互动.我希望使用变量的值来设置或填充它们.

这就是我得到星星的方式

<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.log(note);
    let url = `/coach/editRating/${coach_id}/${note}`
    window.location.href = url
    console.log(url)
}