生成具有唯一名称和 ID 的动态输入

Question

我正在构建一个 Web 表单，在表单中，可以通过单击按钮动态添加其他输入框。我已经完成了这部分工作，但是我需要每个输入都有一个唯一的name 和id。

例如；

<input type="text" name="inventory_number[0]" id="inventory_number[0]">
<input type="text" name="inventory_number[1]" id="inventory_number[1]">
<input type="text" name="inventory_number[2]" id="inventory_number[2]">

目前他们都有相同的name和id；

<input type="text" name="inventory_number[]" id="inventory_number[]">
<input type="text" name="inventory_number[]" id="inventory_number[]">
<input type="text" name="inventory_number[]" id="inventory_number[]">

下面是我的代码以及fiddle。任何帮助表示赞赏。

HTML

<div class="control-group field_wrapper">
  <label class="control-label"><strong> Inventory Number 1</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <input type="text" class="input-medium" name="inventory_number[]" id="inventory_number[]">
      <button class="btn btn-success add-number" type="button" title="Add MAC Address"><i class="icon-plus"></i> </button>
    </div>
  </div>
</div>
<div class="additionalNumber"></div>

JQuery

var maxField = 10; 
var addButton = $('.add-number'); 
var wrapper = $('.additionalNumber'); 
var fieldHTML = '<div class="control-group field_wrapper"><label class="control-label"><strong> Inventory Number x</strong></label><div class="controls"><div class="input-prepend"><input type="text" class="input-medium"  name="inventory_number[]" id="inventory_number[]"><button class="btn btn-danger remove" type="button"><i class="icon-remove"></i> </button></div></div></div>';
var x = 1;
$(addButton).on('click', function(e) {
  if (x < maxField) {
    x++;
    $(wrapper).append(fieldHTML);
  }
  if (x >= maxField) {
    alert('Limited to 10.');
  }
});
$(wrapper).on('click', '.remove', function(e) {
  e.preventDefault();
  $(this).parents('.control-group').remove();
  x--; 
});

如果有更简单/更有效的方法来实现上述目标，我愿意接受建议。

Answer 1

将fieldHtml设为函数并传入x：

//JQuery

var maxField = 10; 
var addButton = $('.add-number'); 
var wrapper = $('.additionalNumber'); 
function fieldHTML(inputNumber) {
    return `<div class="control-group field_wrapper"><label class="control-label"><strong> Inventory Number ${inputNumber}</strong></label><div class="controls"><div class="input-prepend"><input type="text" class="input-medium"  name="inventory_number[${inputNumber}]" id="inventory_number[${inputNumber}]"><button class="btn btn-danger remove" type="button"><i class="icon-remove"></i> Remove</button></div></div></div>`;
}
var x = 1;
$(addButton).on('click', function(e) {
  if (x < maxField) {
    x++;
    $(wrapper).append(fieldHTML(x));
  }
  if (x >= maxField) {
    alert('Limited to 10.');
  }
});
$(wrapper).on('click', '.remove', function(e) {
  e.preventDefault();
  $(this).parents('.control-group').remove();
  x--; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="control-group field_wrapper">
  <label class="control-label"><strong> Inventory Number 1</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <input type="text" class="input-medium" name="inventory_number[]" id="inventory_number[]">
      <button class="btn btn-success add-number" type="button" title="Add MAC Address"><i class="icon-plus"></i> Add</button>
    </div>
  </div>
</div>
<div class="additionalNumber"></div>