不使用javascript更改HTML名称属性

我目前有一个允许用户添加不同票证类型的系统。我希望每个票证属性都有一个唯一的名称，以便在提交表单时可以区分票证

现在，如果用户需要多张票据，有一个按钮可以向页面添加更多票据

我试图让它将票证号附加到html名称属性中，但它不起作用。它正在成功创建更多票证div，但它使用相同的name属性

有人能帮忙吗

HTML

<div id="tickets">
  <div id="ticket" class="form-inline  margin-bottom-40">
     <label class="control-label col-md-3">
         Ticket 
        <span class="required"> * </span>
     </label>
   <div class="col-md-8">
     <input type="text" class="form-control" placeholder="Name" name="ticketname" /> 
     <input type="text" class="form-control" placeholder="Price" name="ticketprice" />
     <input type="text" class="form-control" placeholder="Max Quantity" name="ticketmax" /> 
        <a onclick="moreTickets()">
           <i class="fa fa-plus"></i>
        </a>
    </div>
   <br>
   <br> 
  </div>
 </div>

票
* 

更多门票

var counter = 0;

function moreTickets() {
    counter++;
    var newFields = document.getElementById('ticket').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('tickets');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

var计数器=0；
函数moreTickets（）{
计数器++；
var newFields=document.getElementById（'ticket'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（变量i=0；i

您可以替换以下代码

来自

var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
     var theName = newField[i].name
     if (theName)
        newField[i].name = theName + counter;
}

var newField=newFields.childNodes；
对于（变量i=0；i

至

var newField = newFields.querySelectorAll("input");
for(var i=0; i<newField.length; i++){
    var theName = newField[i].name;
    if(theName)
        newField[i].name = theName + counter;
}

var newField=newFields.querySelectorAll（“输入”）；
对于（var i=0；i我想我应该添加一个jquery替代方案作为参考


$（函数（）{
var tktGrp=$（'#ticket'）.clone（），//代码块的深度克隆
lstGrp='#ticket.col-md-8'，
numCount=1；
$（'#addTickets'）。单击（函数（）{
numCount++；//增量
$（lstGrp+'：last'）。在（tktGrp.html（））之后；//获取列表中的最后一个组，并基于克隆添加新的html
$（lstGrp+'：last.dub'）。每个（function（）{//循环并更改所有dub类的namp属性
$（this.prop（'name'，$（this.prop（'name'）+“-”+numCount）；
});
});
//UX：从不显示第一个删除按钮：仍然添加到html，这样我们就不必在js中编写html
$（lstGrp+'：第一个按钮'）。删除（）；
$（文档）。在（'click'，'[name*='remove']）上，函数（）{//委托新创建的对象
$（this.parent（）.empty（）；
numCount--；//减量
});
})；

票
* 
去除

添加
谢谢。名称属性仍然保持不变，但我会看看w3schools，看看是否能解决。@FMC我添加了显示更改效果的屏幕截图。请刷新浏览器，看看脚本是否正确更新。这很好，我已经检查过了。使用inspect元素，您可以看到名称att每次的发行量增加1。
ticketname
=>
ticketname1
/
ticketprice
=>
ticketprice1
/
ticketmax
=>
ticketmax1
啊，是的，你说得对，对不起。我只是看了底部元素，看到它是一样的，我没有意识到底部元素实际上是第一个.Thank@CuriousMind！您可以使用：newField[i].setAttribute（'name'，theName+counter）；为每个元素设置新名称