Javascript iterations - keep same number until next run
<p>I have the following HTML</p>

<pre><code>&lt;form action="sendform.php" method="post" id="monogramming-builder"&gt;
  &lt;fieldset&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Qty&lt;/th&gt;
        &lt;th&gt;Colour&lt;/th&gt;
        &lt;th&gt;Size&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Remaining&lt;/th&gt;
        &lt;th&gt;Remove&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="text" name="qty1" /&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;select name="colour1"&gt;
            &lt;option value=""&gt;[Please Select]&lt;/option&gt;
            &lt;option value="Red"&gt;Red&lt;/option&gt;
            &lt;option value="Black"&gt;Black&lt;/option&gt;
            &lt;option value="White"&gt;White&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select name="size1"&gt;
            &lt;option value=""&gt;[Please Select]&lt;/option&gt;
            &lt;option value="Small"&gt;Small&lt;/option&gt;
            &lt;option value="Medium"&gt;Medium&lt;/option&gt;
            &lt;option value="Large"&gt;Large&lt;/option&gt;
            &lt;option value="XL"&gt;XL&lt;/option&gt;
            &lt;option value="2XL"&gt;2XL&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="name1" /&gt;&lt;/td&gt;
        &lt;td&gt;18&lt;/td&gt;
        &lt;td&gt;&lt;a href="javascript:;" class="remove"&gt;Remove Row&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;p&gt;&lt;a href="javascript:;" class="addrow"&gt;Add a row&lt;/a&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p>When the <code>.addrow</code> link is clicked, I want a new row to be added, but for each of the <code>name</code>s, I want to add 1 to them. I have the following javascript:</p>

<pre><code>var x = 2;
var tablerow = '&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="qty'+ x++ +'" /&gt;&lt;/td&gt;&lt;td&gt;&lt;select name="colour'+ x++ +'"&gt;&lt;option value=""&gt;[Please Select]&lt;/option&gt;&lt;option value="Red"&gt;Red&lt;/option&gt;&lt;option value="Black"&gt;Black&lt;/option&gt;&lt;option value="White"&gt;White&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;select name="colour'+ x++ +'"&gt;&lt;option value=""&gt;[Please Select]&lt;/option&gt;&lt;option value="Small"&gt;Small&lt;/option&gt;&lt;option value="Medium"&gt;Medium&lt;/option&gt;&lt;option value="Large"&gt;Large&lt;/option&gt;&lt;option value="XL"&gt;XL&lt;/option&gt;&lt;option value="2XL"&gt;2XL&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="name'+ x++ +'" /&gt;&lt;/td&gt;&lt;td&gt;18&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:;" class="remove"&gt;Remove Row&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;'; 

$('.addrow').click(function(){
  $('tr:last-child').after(tablerow);
});
</code></pre>

<p>Obviously this is incrementing up to 5 by the end.</p>

<p>My question is, can the increment only be run after the whole row's been added?</p>
