Clone a <tr> and also increment the name attribute of elements inside <td> by 1
<p>I've to implement a 'Add New Row' feature in a form. The structure of the form is something like:</p>

<pre><code>&lt;table&gt;
&lt;tr&gt;
     &lt;td&gt;&lt;input type="text" name="v1[label]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v1[observation]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v1[remarks]" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
     &lt;td&gt;&lt;input type="text" name="v2[label]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[observation]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[remarks]" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td colspan="3"&gt;
       &lt;input type="button" id="addrow" value="Add One More Row"&gt;&amp;nbsp;
       &lt;input type="submit" name="proceed" value="Submit" /&gt;
    &lt;/td&gt; 
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>As seen, with each row, there is an increase in <code>v[]</code> number. v1, v2..and so on</p>

<p><strong>WHAT I'M LOOKING FOR</strong></p>

<p>When 'Add One More Row' button is clicked, the following things should happen</p>

<ul>
<li>A new row gets inserted just above the last row (the row with
buttons)</li>
<li>The name attribute value increases by 1 (i.e. v2[label] becomes
v3[label], v2[observation] becomes v3[observation] and so on) in that
row</li>
</ul>

<p><strong>WHAT I TRIED</strong></p>

<p>The closest I came to was using <code>jQuery's</code> <code>clone()</code>. This does add the row perfectly. But I'm finding it difficult to find a way to increase the value of the name attribute by 1 each time  the button is clicked.</p>

<p><strong>jQUERY BEING USED CURRENTLY</strong></p>

<pre><code>$('input:button[id="addrow"]').click(function(){

   var secondlast = $('table tr:last').prev('tr');
   secondlast.clone().insertBefore(secondlast);

});
</code></pre>

<p>If I click the button two times, I'm getting the following HTML added</p>

<pre><code>&lt;tr&gt;
     &lt;td&gt;&lt;input type="text" name="v2[label]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[observation]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[remarks]" /&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
     &lt;td&gt;&lt;input type="text" name="v2[label]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[observation]" /&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="v2[remarks]" /&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>So a row is being added, but the name attribute remains at v2, whereas it should be v3 and v4 for the third and fourth row. I understand <code>clone()</code> can't do that and that is why I'm looking for an alternative.</p>
