estoy realizando un sistema de ventas y me estoy complicando con una parte, donde quiero que al agregar una unidad mas de un determinado producto, el sistema me agregue unas opciones de ese producto. Ejemplo agrego un pote de helado, que el sistema me agregue un seleccionador para los gustos del mismo.
Lo estoy haciendo con Jquery.
Algo así, cada vez que sumo una unidad en el contador, realiza una función append para agregar en la div de variedades unos input checkbox, (lo que hago es tomar los checkbox que había con .html() y los agrego al div con .append() ), eso funciona bien el problema es que me asigna automáticamente los mismos id que ya tenían los input anteriores, necesito que me cambie los id de los input ( seria ideal que solo le cambie un numero al final ).
Dejo mi código para que se den una mejor idea:
function sumarVariedad(DIV)
{
var PRODUCTO = "#variedadesProducto" + DIV;
var variedad = $(PRODUCTO).html();
$(PRODUCTO).append(variedad);
}
Lo que quiero hacer es que me agregue cada vez que ejecuto la función: , Donde X vaya cambiando el valor.
Añado fragmentos de código para que se entienda:
<div id="variedadesProducto1">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
</div>
Lo que deseo es que cada vez que se ejecute la función, se agregue dentro de la div '#variedadesProducto1' la misma cantidad de input que ya tiene dentro pero con distintos id (inlineCheckbox3 y inlineCheckbox4) por ej.