Javascript，克隆后修改元素

我试图发布一个表单的克隆部分，但由于元素名称相同，它没有提交所有内容

有人知道克隆过程中更改输入名称属性的最佳过程吗

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
     if (checkMACAddress()==true) {
     $("#test").clone().insertAfter("div.test-row:last");
     }
  });
});
    function checkMACAddress() {
               var valid = true;
                for ( var i = 0, l = document.getElementsByName("mac").length; i < l; i++ ) {
        var macAddress=document.getElementsByName("mac")[i].value;
        var macAddressRegExp=/^(?:[0-9A-F]{2}[:]?){5}(?:[0-9A-F]{2}?)$/i;

        if (macAddressRegExp.test(macAddress)==false) { //if match failed
            alert("MAC Invalid - Must be IEEE.802 example 00:3F:00:10:00:2C");
            valid=false;
        }
               }
        return valid;
    }
</script>
<h3>Account Details</h3>
<div class="row">
    <div class="columns small-4">
               <label>Destination Account Number*</label>
        [[input||type=text||name=Account||name_literal=Account||placeholder=12345||required=required]]
    </div>
</div>
<hr>
<h3>Device Details</h3>
<h5>
        <button type='button'>Add Device</button>
</h5>
<div id="test" class="test-row">
    <div class="columns small-3">
        <label>MAC - IEEE.802 Format Only</label>  
        [[input||type=text||name=mac||name_literal=mac||placeholder=54781A139264||required=required]]
    </div>
    <div class="columns small-3">
        <label>Extension/Seat Number</label>
        [[input||type=text||name=seat||name_literal=seat||placeholder=200]]
    </div>
    <div class="columns small-3">
        <label>Display Name</label>
        [[input||type=text||name=station||name_literal=station||placeholder=reception desk]]
    </div>

---

一种方法是使用数组语法作为字段名，例如：data[identifier][]。否则，克隆后需要修改“名称”属性：

var c  = 0;
// each time you click on the button...
$(".clone").on('click',function(){
    // generate a new clone of complete test div..
    var klon = $( '#test').clone();
    // append it to parent element (or after existing, as you like)
    $('#test').parent().append(klon);
    // increase global counter...
    c++;
    // inside clone find all inputs 
    // (if you other form elements, you must add them in selector)
    klon.find('input').each(function() {
        var $this = $(this),
            name = $this.attr('name');
        // update name attribute
        $this.attr('name', name + '_' + (c));

    });
});

在这里看到一张照片。

---

我仍然更喜欢名称/数组解决方案，它更容易在服务器端处理，因为您可以在字段上循环，而不是询问未知数量的新字段。

哪个是克隆元素？它是整个div测试。此附加克隆的div名称。如何轻松地在div.child输入名称等中附加子元素？@RossBeer我已经更新了答案并添加了一个fiddle来演示name属性的动态变化。正如我在回答中所评论的那样，我更喜欢您案例中的名称/数组变量，例如mac[]，seats[]。