复制和区分表单的各个部分

更新： 使用colecmc提供的代码（谢谢！！）我更新了codepen。我喜欢添加 date.now 的方式，但我只想增量增加。我不确定如何将其应用到这个函数中，我尝试了 zer00ne 的索引增量，但我做错了。

let cloneList = [],
    index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.

document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var component = clonedNode.querySelector('input');
  index++;
  clonedNode.id = index+1;

  cloneList.push(clonedNode.id);

  component.id = `componentID_${clonedNode.id}`;
  component.name = `componentName_${clonedNode.id}`;

  container.appendChild(clonedNode);
}

我的表格有问题。最初我在页面上有两个表格。然而，提交时仅写入第一个表格中的信息。我尝试组合这些表格。现在，如果我填写活动和组件输入并将其提交到正确的表中（好！）。然而，组件部分应该被复制。营销活动可以包含用户想要的任意多个组件。我正在使用cloneNode，在合并表格之前，它添加了更多组件部分。现在它们组合在一起，该功能不再起作用。我很困惑这是否是我正在做的事情的正确方法。我添加了一个 copdpen，它显示了我正在尝试做的事情的精简版本。

基本上，我希望能够按“添加组件”，添加尽可能多的新组件，填写它们，然后将所有组件作为记录写入数据库。我需要一种方法来区分所有克隆（新的 ID 或名称？） 代码笔：https://codepen.io/anon_guy/pen/VMZWWW?editors=1010 https://codepen.io/anon_guy/pen/VMZWWW?editors=1010

HTML:

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper" id="add-components">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">

        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JS:

document.getElementById('launch').onclick = function() {
      var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
      var clonedNode = addOnDiv.cloneNode(true);
        container.appendChild(clonedNode );
    }

在附加到容器之前，您需要尝试类似的操作clonedNode.id = Date.now();

这将提供一种通过提供唯一 ID 来区分所有克隆的方法。您可以像这样更进一步：

let cloneList = [];
document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var component = clonedNode.querySelector('input');

  clonedNode.id = Date.now();
 
  cloneList.push(clonedNode.id);

  component.id = `componentID_${clonedNode.id}`;
  component.name = `componentName_${clonedNode.id}`;

  container.appendChild(clonedNode);
}

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper" id="add-components">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">

        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>