Изменить идентификатор нескольких динамических полей

Question

У меня есть форма с динамическими полями, но я хотел бы, чтобы дополнительные поля имели другой идентификатор.

Мой код работает довольно хорошо, но поскольку это простая копия HTML-кода, здесь нет ссылки налюбой идентификатор.Я полностью новичок в Javascript, и я не знаю, как этого добиться.

$(".addMore").click(function() {
  if ($('body').find('.field').length <= 10) {
    var fieldHTML = '<div class="form-group field">' + $(".fieldCopy").html() + '</div>';
    $('body').find('.field:last').after(fieldHTML);
  }
});

// Remove
$("body").on("click", ".remove", function() {
  $(this).parents(".field").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="">
  <div class="form-group field">
    <div class="input-group">
      <input id="name" type="text" name="name[]" class="form-control" />
      <input id="email" type="text" name="email[]" class="form-control" />
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-success addMore">Add</a>
      </div>
    </div>
  </div>
  <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
</form>

<!-- copy of input fields group -->
<div class="form-group fieldCopy" style="display: none;">
  <div class="input-group">
    <input id="name" type="text" name="name[]" class="form-control" />
    <input id="email" type="text" name="email[]" class="form-control" />
    <div class="input-group-addon">
      <a href="javascript:void(0)" class="btn btn-danger remove">Remove</a>
    </div>
  </div>
</div>

Answer 1

Вы можете установить его так:

var i = 0;
    $(".addMore").click(function() {
      if ($('body').find('.field').length <= 10) {
        var fieldHTML = '<div class="form-group field">' + $(".fieldCopy").html() + '</div>';
        $('body').find('.field:last').after(fieldHTML);
           $('body').find('.field:last').attr("id",i);
        i++
      }
    });