En mi proyecto, necesito registrar identificadores para que cuando haga clic en un botón que tiene un tipo de casilla de verificación, solo verifique el botón donde hice clic.

En la clase de cambio personalizado, quería poner una identificación en la entrada y una para en la etiqueta. Logré mostrar la identificación y el for pero todas las entradas y etiquetas de cada clase click-and-get-containerDiv tienen la misma identificación que las demás.

Mi código html:

 <div class="col-2 click-and-get-container click-and-get-containerDiv"> <div class="checkbox-container"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" value="1"> <label class="custom-control-label">Activate click &amp; get</label> </div> </div> <div class="col-12 d-none click-and-get-amount-form" id="click-and-get-amount-form_all"> <input type="number" class="form-control click-and-get-amount" value step="0.01" placeholder="Price (EUR)"> <span class="small text-danger click-and-get-amount-error d-none"></span> </div> </div>

Para el código js, utilicé un for para que mi incriminación se detenga en el número total de clases gg que hay en la página html (lo verifiqué con un archivo console.log()).

Mi código javascript:

 for (let idClickAndGet = 1; idClickAndGet <= $('.click-and-get-containerDiv').length;) { $(`.custom-control-input:nth-child(${idClickAndGet})`).attr('id', `click-and-get${idClickAndGet}`); $(`.custom-control-label:nth-child(${idClickAndGet})`).attr('for', `click-and-get${idClickAndGet}`); idClickAndGet++; }