title: Cloning and renaming form elements with jQuery
body: <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>