разные этикетки для каждой дополнительной добавленной формы

Question

Я adding addition form на button click.

Я хочу иметь different label for each added form.

Я делаю это следующим образом, и проблема изменения этикетки для каждой формы. Как я могу это решить.

Любая идея?

HTML

<div id="jointBuyer" class="JointBuyerDive" style="display:none"> 
    <div id="jBuyer"> 
     <div id="inner"class="col-lg-6"> 
      <form id="buyerForm" role="form" method="POST" enctype="multipart/form-data"> 
      <label>Buyer</label> 
      ----------- 
      ----------- 
     </div> 
    </div> 
<div> 

JQuery

<script> 
$(document).ready(function(){ 
    var index = 0; 
    $("#testButton").click(function() { 
     $("#jBuyer").clone().appendTo("#jointBuyer"); 
     $('.changeBuyer').text('Buyer ' + index); 
     index++; 
    }); 
}); 
</script> 

Answer 1

В настоящее время код не работает, как писал. Вот рабочая версия меняется текст на последнюю метку, а не дублировать любые идентификаторы и фактически показывает клонированную форму слишком

$(document).ready(function() { 
 
    var index = 0; 
 
    $("#testButton").click(function() { 
 
    $("#jBuyer").clone().appendTo("#jointBuyer").attr("id","jBuyer"+index).show(); 
 
    $('.changeBuyer').last().text('Buyer ' + index); 
 
    index++; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button" id="testButton">Add</button> 
 
<div id="jointBuyer" class="JointBuyerDive"><div> 
 
<div id="jBuyer" style="display:none"> 
 
    <div class="col-lg-6"> 
 
    <form role="form" method="POST" enctype="multipart/form-data"> 
 
     <label class="changeBuyer">Buyer</label> 
 
     ----------- ----------- 
 
    </form> 
 
    </div> 
 
</div> 
 

Answer 2

---

Вы должны только изменить текст для добавляемого формы. Поэтому вы можете использовать: last для таргетинга последней добавленной формы.

<script> 
$(document).ready(function(){ 
    var index = 0; 
    $("#testButton").click(function() { 
     $("#jBuyer").clone().appendTo("#jointBuyer"); 
     $('.changeBuyer:last').text('Buyer ' + index); 
     index++; 
    }); 
}); 
</script> 

Answer 3

Вы должны изменить текст клонированной формы:

$(document).ready(function(){ 
    var index = 0; 
    $("#testButton").click(function() { 
     var clonedForm = $("#jBuyer").clone(); 
     clonedForm.text('Buyer ' + index); 
     clonedForm.appendTo("#jointBuyer"); 
     index++; 
    }); 
});