Trocar os valores dos atributos “name” dos inputs/selects html subsequentes?

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?