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');
}
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>
<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);
}