title: How do I continue the numeric sequence of a cloned input?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').click(function(){
    $('#inputs').children().first().clone().appendTo('#inputs');
    $('#inputs').children().last().clone().appendTo('#inputs');
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='inputs'&gt;
    &lt;input type='text' name="input['name'][1]"&gt;
    &lt;input type='text' name="input['name'][2]"&gt;
    &lt;input type='text' name="input['name'][3]"&gt;
    &lt;br&gt;
    &lt;input type='text' name="input['age'][1]"&gt;
    &lt;input type='text' name="input['age'][2]"&gt;
    &lt;input type='text' name="input['age'][3]"&gt;
  &lt;/div&gt;
  &lt;button&gt;Add&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Script works properly, but the only problem is copying the <code>name</code> of the <code>input</code>. I want when I clone it to change the <code>[1]</code> into its sequence number with the <code>['name']</code> changes to <code>['age']</code>  in the second clone. I also want the <code>['name']</code> to be appended to the end of the list of <code>['name']</code>.</p>
  
  <p>I thought about copying the <code>name</code> then removing last two letters and replace it by the <code>'+index+]'</code> But I wonder if that the proper way to do it.</p>