[SOLUCIONADO] Clonar Input con diferente ID

[Derzz]

Hola estimados, mi problema es el siguiente, estoy aprendiendo jQuery, y estuve haciendo pruebas con .clone(); para duplicar un input pero el problema es que lo duplica con todo igual (incluido el ID).

Como podria hacer para que el ID de input (id="campo-0") cada vez que duplique pase a (id="campo-1") nota tengo un botón con una clase "add-input".

Gracias de antemano por cualquier pista que me den.

[Alexis88]

Te va a tocar elaborar una función en la cual tomarás el id del elemento clonado y a su último caracter —que es el número—, le sumará uno.

Saludos

[Derzz]

Si, claro.

Dejo la solución por si alguien busca lo mismo.

En mi HTML hay cosas que estan demas como el input hidden que son parte de otra funcionalidad, pero lo que importa es el ejemplo de duplicado :)

Código HTML:

<div class="producto-container">
                        <div class="producto-row-0">
                            <div class="form-group col-md-5">
                                <label class="sr-only" for="">Producto</label>
                                <input type="text" name="producto" class="form-control input-sm" placeholder="Producto">
                                <input type="hidden" name="prod_custom" class="form-control input-sm" placeholder="Producto Personalizado" value="0">
                            </div>
                            <div class="form-group col-md-2">
                                <label class="sr-only" for="">Cantidad</label>
                                <input type="text" name="cantidad" class="form-control input-sm" placeholder="Ingrese la cantidad">
                            </div>
                            <div class="form-group col-md-2">
                                <label class="sr-only" for="">Precio</label>
                                <input type="text" name="precio" class="form-control input-sm" placeholder="Precio">
                            </div>
                            <div class="form-group col-md-2">
                                <input type="checkbox" name="act_custom" class="act_custom">
                                <label for="">Producto Personalizado</label>
                            </div>
                            <div class="boton form-group col-md-1">
                                <label class="sr-only" for="">Agregar otro Producto</label>
                                <button id="add-producto" class="btn btn-primary input-sm"><strong>+</strong></button>
                            </div>
                        </div>
                    </div>
 

Código Javascript:

//Agrega Nuevos Campos de Productos
    var i = 1;
    $("#add-producto").click(function(e){
        e.preventDefault();//eliminamos el evento por defecto
        $(".producto-row-0").clone().appendTo(".producto-container").attr("class","producto-row-"+(i++));
    });
 

Saludos.