Question

I have form:

<form action="" method="post">
    <div id="fields_1">
        <input name="field1_1" type="...
        <input name="field2_1" type="...
        <input name="field3_1" type="...
        <input name="field4_1" type="...
    </div>
    <a href="#" onclick="duplicate();">Duplicate</a>
</form>

and i want to duplicate on click all fields but different names, for example when I click “Duplicate” it shows:

<form action="" method="post">
    <div id="fields_1">
        <input name="field1_1" type="...
        <input name="field2_1" type="...
        <input name="field3_1" type="...
        <input name="field4_1" type="...
    </div>
    <div id="fields_2">
        <input name="field1_2" type="...
        <input name="field2_2" type="...
        <input name="field3_2" type="...
        <input name="field4_2" type="...
    </div>
    <a href="#" onclick="duplicate();">Duplicate</a>
</form>

How to do it?

Answer 1

http://api.jquery.com/clone/

$('#fields_1').clone().attr("id","fields_2").appendTo('#yrContainer');

Where yrContainer is either the form, or maybe a new div container. If you need to change input names shown below, and here jsFiddle.

$("#myButton").click( function () {
    var fields = $('#fields_1').clone().attr("id","fields_2"); 
    var inputs = fields.find("input");
    inputs.each(function(i) {
     $(this).attr("name", "field"+i+"_2");
   });   
  fields.appendTo('#yrContainer')
})