我将模板中的 <form> 标签放入 for 循环中，以显示每个图像的 5 星评级，用户可以评价，但它仅保存第一个元素的响应

如何解决我将模板中的 <form> 标签放入 for 循环中，以显示每个图像的 5 星评级，用户可以评价，但它仅保存第一个元素的响应

我尝试用不同的图像制作一个网站，用户可以给它们 5=-star-rating 所以我从管理端保存图像并将卡片放入循环中以显示数据库中的所有当前数据，然后我还放置了 5 星级评分，但它仅将第一张图像的数据保存在卡片中我希望它保存每张图像的评分，我到处搜索但找不到任何解决方案，请帮助我。

这是我的 HTML 页面

<div class="container">
        <div class="row">
            {%for a in ab%}
            <div class="col-4">
                <div class="card">
                    <img class="card-img-top" src="{{a.image.url}}">
                    <div class="card-body">
                        <h5 class="card-title">{{a.product}}</h5>
                     <div class="col text-center">
                    <form class="rate-form" action="" method="POST" id="{{a.id}}">
                        {% csrf_token %}
                        <button type="submit" class="fa fa-star fa-3x my-btn" id="first"></button>
                        <button type="submit" class="fa fa-star fa-3x my-btn" id="second"></button>
                        <button type="submit" class="fa fa-star fa-3x my-btn" id="third"></button>
                        <button type="submit" class="fa fa-star fa-3x my-btn" id="fourth"></button>
                        <button type="submit" class="fa fa-star fa-3x my-btn" id="fifth"></button>
                    </form>
                    <br>
                    <div id="confirm-box"></div>
                </div>
                </div>
            </div>
            {%endfor%}
    </div>
    </div>

这是我的java脚本

// console.log('hello world')

// get all the stars
const one = document.getElementById('first')
const two = document.getElementById('second')
const three = document.getElementById('third')
const four = document.getElementById('fourth')
const five = document.getElementById('fifth')

// get the form,confirm-box and csrf token
const form = document.querySelector('.rate-form')
const confirmBox = document.getElementById('confirm-box')
// const csrf = document.getElementsByName('CsrfViewMiddleware')
var csrf = $("input[name=csrfmiddlewaretoken]").val();


const handleStarSelect = (size) => {
    const children = form.children
    console.log(children[0])
    for (let i=0; i < children.length; i++) {
        if(i <= size) {
            children[i].classList.add('checked')
        } else {
            children[i].classList.remove('checked')
        }
    }
}

const handleSelect = (selection) => {
    switch(selection){
        case 'first': {
            // one.classList.add('checked')
            // two.classList.remove('checked')
            // three.classList.remove('checked')
            // four.classList.remove('checked')
            // five.classList.remove('checked')
            handleStarSelect(1)
            return
        }
        case 'second': {
            handleStarSelect(2)
            return
        }
        case 'third': {
            handleStarSelect(3)
            return
        }
        case 'fourth': {
            handleStarSelect(4)
            return
        }
        case 'fifth': {
            handleStarSelect(5)
            return
        }
        default: {
            handleStarSelect(0)
        }
    }

}

const getNumericValue = (stringValue) =>{
    let numericValue;
    if (stringValue === 'first') {
        numericValue = 1
    } 
    else if (stringValue === 'second') {
        numericValue = 2
    }
    else if (stringValue === 'third') {
        numericValue = 3
    }
    else if (stringValue === 'fourth') {
        numericValue = 4
    }
    else if (stringValue === 'fifth') {
        numericValue = 5
    }
    else {
        numericValue = 0
    }
    return numericValue
}

if (one) {
    const arr = [one,two,three,four,five]

    arr.forEach(item=> item.addEventListener('mouseover',(event)=>{
        handleSelect(event.target.id)
    }))

    arr.forEach(item=> item.addEventListener('click',(event)=>{
        // value of the rating not numeric
        const val = event.target.id
        
        let isSubmit = false
        form.addEventListener('submit',e=>{
            e.preventDefault()
            if (isSubmit) {
                return
            }
            isSubmit = true
            // picture id
            const id = e.target.id
            // value of the rating translated into numeric
            const val_num = getNumericValue(val)

            $.ajax({
                url: '/add_rating/',type: 'post',data: {
                    'csrfmiddlewaretoken': csrf,'el_id': id,'val': val_num,},success: function(response){
                    console.log(response)
                    confirmBox.innerHTML = `<h1>Successfully rated with ${response.score}</h1>`
                },error: function(error){
                    console.log(error)
                    confirmBox.innerHTML = '<h1>Ups... something went wrong</h1>'
                }
            })
        })
    }))
}
    jQuery(document).ready(function($){

    $(".btnrating").on('click',(function(e) {

    var previous_value = $("#selected_rating").val();

    var selected_value = $(this).attr("data-attr");
    $("#selected_rating").val(selected_value);

    $(".selected-rating").empty();
    $(".selected-rating").html(selected_value);

    for (i = 1; i <= selected_value; ++i) {
    $("#rating-star-"+i).toggleClass('btn-warning');
    $("#rating-star-"+i).toggleClass('btn-default');
    }

    for (ix = 1; ix <= previous_value; ++ix) {
    $("#rating-star-"+ix).toggleClass('btn-warning');
    $("#rating-star-"+ix).toggleClass('btn-default');
    }

    }));
});