Question

I have several different types of input that I am cloning using jQuery clone. Can the number at the beginning of the name attribute be incremented for each input when they are cloned? I have been trying to figure this out while keeping the Radio button’s name’s the same after each increment so that they remain grouped together.

Here is a Fiddle to see the that I am cloning.

http://jsfiddle.net/aHA2d/

Here is my HTML

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​

Here is the JavaScript that I am using to create the clone

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var c = $('.container:first').clone(true);   
        $('.container:last').after(c);            
    });        
});​

Here is an example of the HTML I am trying to create after cloning the div tag once.

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​
<div class="container">
  <input type="radio" name="7_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="7_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="8_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="9_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="10_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="11_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="11_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="12_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​

Answer 1

Try this:

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var b = $('.container [name]').length;
        var c = $('.container:first').clone().find('[name]').attr('name', function(i, cur) {
            var n = cur.match(/\d+/g).join('');
            var s = cur.match(/\D+/g).join('');
            return (b + ++n) + s;
        }).end()
        $('.container:last').after(c);
    });
});​

http://jsfiddle.net/8E3sC/

As the cloned button is generated dynamically you should delegate the event:

$(document).on('click', '.btnAdd', function() { // ...  })