使用JQUERY以动态创建的形式命名两个不同的输入

Question

I am writing a program which requires a text box and a textarea to be added dynamically to a form. I am using the clone function for this purpose. Unfortunately, I cannot seem to figure out how to make each box have a unique ID. Here is my Jquery:

<script type="text/javascript"> 
$(document).ready(function() {

$('#addButton').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);

var newElem = $('#form1').clone().attr('id', 'form' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

$('#form' + num).after(newElem);

$(newElem).append(
   $(document.createElement('input')).attr({
       id:    'myCheckbox'  + newNum
      ,name:  'myCheckbox' + newNum
      ,value: 'myValue'
      ,type:  'checkbox'
   })
);
});

})
</script>

And my HTML:

 <form method="post" form action="save3.php">
 <div name="forms" id="form1" class="clonedInput" width="800px">
     <label></label><textarea rows="4" cols="50" id="text1" class="text" name="text[]"      ></textarea>
 <label></label><input type="text" id="title1" class="title" name="title[]">
 </div>
 </form>

Thank you in advance for your help

Answer 1

your code is wrong: http://jsfiddle.net/mig1098/bk40jd9f/

$(document).ready(function() {

$('#addButton').click(function() {

var num = $('.clonedInput').length;
var newNum = new Number(num + 1);

var newElem = $('#form1').clone().attr('id', 'form' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

$('#form' + num).after(newElem);

$(newElem).append(
   $(document.createElement('input')).attr({
       id:    'myCheckbox'  + newNum
      ,name:  'myCheckbox' + newNum
      ,value: 'myValue'
      ,type:  'checkbox'
      })
   );
 });

})

Answer 2

Your problem seems to be that you're only renaming the attribute values for the first child, the label that correctly gets the id attribute value "name2":

newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

But I can't see any code that takes care of the textarea and the input field in the same manner. There are several ways you could do this, one being this:

$('#form' + newNum + ' textarea').attr('id','text' + newNum);
$('#form' + newNum + ' input[type="text"]').attr('id','title' + newNum);

See http://jsfiddle.net/bk40jd9f/1/