Jquery克隆和HTML数组

构建表单以捕获进入仓库的货物的尺寸。表单有一行，包含四个字段：碎片、宽度、长度和高度

行的末尾有一个按钮，用于在有更多数据要捕获时添加其他行。i、 e.可能有两件具有一组尺寸，另外两件具有不同尺寸。无法提前知道将捕获多少行数据。我已将字段命名为碎片[]、长度[]、宽度[]和高度[]

我有两个问题。
1.当我使用jquery克隆行时，它第一次添加1行，然后添加2行，然后添加4行。i、 它正在复制新行，而不仅仅是第一行

克隆行时，值将移动到新行中。正如你所看到的，我已经尝试设置为零，但没有效果。如何在jquery中操作HTML数组字段

还有我的HTML

    <div class="row" id='consignment_dimensions'>
      <div class="col-15">
        <label for="dims">Dimensions</label>
      </div>
      <div class="col-10">
        <input type="text" id="pieces[]" name="pieces[]" maxlength ="6" placeholder="Pieces">
      </div>

      <div class="col-15">
        <input type="text" id="length[]" name="length[]" maxlength ="6" placeholder="Length">
      </div>  

      <div class="col-15">
        <input type="text" id="width[]" name="width[]" maxlength ="6" placeholder="Width">
      </div>  

      <div class="col-15">
        <input type="text" id="height[]" name="height[]" maxlength ="6" placeholder="Height">
      </div>
         <div class="col-10">   
          <input type="button" class="my-button" name="consignment_dimensions_button" id="consignment_dimensions_button" value="Add more dims">  

          </div>    
      </div>

尺寸

第一个问题是因为您将

克隆（）预先添加回了从中克隆的元素，因此下次克隆时，它将包含原始字段以及所有先前预先添加的字段。要解决此问题，请将内容前置到
#寄售_维度
的父元素。在下面的示例中，我使用了
#container

其次，
val（0）
对您不起作用，因为
[
和
]
字符在选择器中有特殊意义，您需要使用
\\
对它们进行转义-尽管您复制了这些
id
，所以我建议删除此逻辑并用类替换它

尽管如此，还有其他几个问题


您正在复制大量需要唯一的
id
属性。在这种情况下，我建议从所有元素中完全删除
id
，只使用类
不要删除每个克隆集的
按钮
，只需将按钮放在克隆HTML之外即可
您使用的
：last
无效，因为您正在预写内容，因此它将转到容器的开头。通过以上对类/ID的修改，它仍然是多余的
在克隆上调用
removeAttr（'id'）
，以防止复制其
id


$（“#寄售#u尺寸_按钮”）。单击（函数（）{
var$clone=$（“#original.audition_dimensions”）.clone（）.removeAttr（'id'）.prependTo（“#container”）；
$clone.find（'.pieces、.length、.width、.height'）.val（0）；
});

尺寸

    <div class="row" id='consignment_dimensions'>
      <div class="col-15">
        <label for="dims">Dimensions</label>
      </div>
      <div class="col-10">
        <input type="text" id="pieces[]" name="pieces[]" maxlength ="6" placeholder="Pieces">
      </div>

      <div class="col-15">
        <input type="text" id="length[]" name="length[]" maxlength ="6" placeholder="Length">
      </div>  

      <div class="col-15">
        <input type="text" id="width[]" name="width[]" maxlength ="6" placeholder="Width">
      </div>  

      <div class="col-15">
        <input type="text" id="height[]" name="height[]" maxlength ="6" placeholder="Height">
      </div>
         <div class="col-10">   
          <input type="button" class="my-button" name="consignment_dimensions_button" id="consignment_dimensions_button" value="Add more dims">  

          </div>    
      </div>