javascript - 更改多个动态字段的id

Question

我有一个包含动态字段的表单，但我希望其他字段具有不同的 ID。

我的代码运行得很好，但由于它是 HTML 代码的简单副本，因此没有任何 ID 的引用。我是 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++
      }
    });