title: Clone a <tr> and also increment the name attribute of elements inside <td> by 1
body: <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>