Cloning and renaming form elements with jQuery
<p>I am looking for an effective way to either clone/rename or re-create address fields to offer ability to submit multiple addresses on the same page. So with form example like this:</p>

<pre><code>&lt;div id="addresses"&gt;
  &lt;div class="address"&gt;
    &lt;input type="text" name="address[0].street"&gt;
    &lt;input type="text" name="address[0].city"&gt;
    &lt;input type="text" name="address[0].zip"&gt;
    &lt;input type="text" name="address[0].state"&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;a href="" id="add_address"&gt;Add address form&lt;/a&gt;
</code></pre>

<p>From what I can understand there are two options to do that:</p>

<ol>
<li><p>Recreate the form field by field and increment the index which is kind of verbose:</p>

<pre><code>var index = $(".address").length;


$('&lt;`input`&gt;').attr({
name: 'address[' + index + '].street',
type: 'text'
}).appendTo(...);


$('&lt;`input`&gt;').attr({
name: 'address[' + index + '].city',
type: 'text'
}).appendTo(...);


$('&lt;`input`&gt;').attr({
name: 'address[' + index + '].zip',
type: 'text'
}).appendTo(...);


$('&lt;`input`&gt;').attr({
name: 'address[' + index + '].state',
type: 'text'
}).appendTo(...);
</code></pre></li>
<li><p>Clone Existing layer and replace the name in the clone:</p>

<pre><code>$("div.address").clone().appendTo($("#addresses"));
</code></pre></li>
</ol>

<p>Which one do you recommend using in terms of being more efficient and if its #2 can you please suggest how I would go about search and replacing all occurrences of [0] with [1] ([n]). Thank you.</p>
