how to generate different div id inside ui:repeat for javascript code

Question

I have one ui:repeat component and inside that ui:repeat there is one div which is using in my javascript code. I have to dynamically change this div id on each ui:repeat call. how can i make it possible?

Please find the below code for your reference.

Xhtml Code

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="idToChange">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

JS Code

 function loadFunction() {
     let varsome= document.getElementsById('idToChange');

     }

Answer 1

This should be possible accessing rowStatus.index.

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

EDIT

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>
 <input type="checkbox" onclick="(evt)=>handleCheckboxClicked(evt,'prefix#{rowStatus.index}')" />
 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

function handleCheckboxClicked(evt,id){
    const div = document.getElementById(id);
    
}