Acontece que eu tenho a seguinte situação, no meu HTML possuo a estrutura dessa forma:
<div class="form-row mt-3">
<select name="produto0" class="form-control{{ $errors->has('produtos') ? ' is-invalid' : '' }}">
@foreach($produtos as $p)
<option value="{{$p->id}}">{{$p->nome}}</option>
@endforeach
</select>
</div>
<a href="javascript:void(0)" class="btn btn-sm text-white bg-info" id="adicionar">
<i class="fa fa-plus-square"></i> ADICIONAR NOVO PRODUTO</span>
</a>
E depois quando eu clico no botão que possui o id="adicionar"
o código em jQuery clona e repete esse trecho logo abaixo, segue o código em jQuery:
$( "#adicionar" ).click(function(e) {
e.preventDefault();
var original = $(this).closest(".form-row");
var copia = original.clone(true, true);
original.after(copia);
});
Depois disso eu gostaria que o próximo trecho de código clonado, ou seja, igual, tenha o atributo name="produto0"
diferente, por exemplo name="produto1"
, como fazer isso usando o jQuery?