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:

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

From what I can understand there are two options to do that:

1. Recreate the form field by field and increment the index which is kind of verbose:

   var index = $(".address").length;
   
   
   $('<`input`>').attr({
   name: 'address[' + index + '].street',
   type: 'text'
   }).appendTo(...);
   
   
   $('<`input`>').attr({
   name: 'address[' + index + '].city',
   type: 'text'
   }).appendTo(...);
   
   
   $('<`input`>').attr({
   name: 'address[' + index + '].zip',
   type: 'text'
   }).appendTo(...);
   
   
   $('<`input`>').attr({
   name: 'address[' + index + '].state',
   type: 'text'
   }).appendTo(...);
   

2. Clone Existing layer and replace the name in the clone:

   $("div.address").clone().appendTo($("#addresses"));
   

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.