How can I get through javascript all the elements of the same id and apply the same value to all of them?

Below is my form. It's a loop that creates 71 subdivs and every one of them contain a specific button image and hidden inputs. Every one of the inputs it's supposed to have the same name and id as the other 70.

If I make the input visible and put $i as a value , when page loads it shows everything correct. 71 images with 71 different values. Although if I submit that way I alwats get the same value on my controller no matter the image I choose to click on.

So I want to add to my onm ouseOver function a way to set the current value of the hovered image to all the inputs. That way if I click on image to submit the value would have been set correct.

My form:

    <form action="/searches/se_racestandingsround" method="post">@csrf                                    
    <div class="row mt-5 mr-5 ml-5">
        <?php for($i=2021; $i>=1950; $i--){ ?>
            <div class="col-3 d-flex flex-column align-items-center mb-3 mt-5">
                <div class="w-50 mb-5 rounded-circle" style="height: 150px;">
                    <div class="bg-dark w-100 h-100 mb-5 border rounded-circle toClick" id="<?php echo $i ?>" onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">
                        <input type="hidden" name="round" id="round">
                        <input type="hidden" name="rnd" id="rnd">
                        <button style="object-fit:cover" class="w-100 h-100 border rounded-circle"><img src='/imgs/jpg/years/<?php echo $i ?>.jpg' style="object-fit:cover" class="w-100 h-100 border rounded-circle"></button>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
    </form>

My onm ouseOver function:

    function onMouseOver(year){
        // alert("Hello! I am an alert box!!");
        var curYear = year.id; 
        // document.getElementById('rnd').value = currentNumOfRounds; //NOT WORKING
        // document.getElementById('round').value = curYear;  //NOT WORKING
         
    }

CodePudding user response：

If you insist on using one id for multiple elements, then your only option is to use querySelectorAll:

setTimeout(() => {
  document.querySelectorAll("#a").forEach(v => {
    v.innerText = "what";
  })
}, 3000);

<p id="a">one</p>
<p id="a">two</p>
<p id="a">three</p>
<p id="a">four</p>

But you really should be using classes instead.

CodePudding user response：

all the elements of the same id an ID has to be unique within the document.

Having that said you theoretically could query for all elements with the same value for the id attribute using the attribute selector.

function setAllElementsTo(value) {
  document.querySelectorAll('[id="a"]').forEach(element => {
    element.value = value
  })
}

setAllElementsTo('a');

<input id="a">
<input id="a">
<input id="a">
<input id="a">
<input id="a">

This works but does not change the fact that the document is semantically incorrect.

Instead, you should use different IDs and use something else that those elements have in common. Like a class, a data- attribute or what ever else makes sense.