Question

I have the following HTML

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

When the .addrow link is clicked, I want a new row to be added, but for each of the names, I want to add 1 to them. I have the following javascript:

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

$('.addrow').click(function(){
  $('tr:last-child').after(tablerow);
});

Obviously this is incrementing up to 5 by the end.

My question is, can the increment only be run after the whole row’s been added?

Answer 1

You are incrementing x each time you write x++. Remove ++ from first occurances of x, and leave it x++ only after the last one.

For example, if you use the string : “b” + x++ + “b” + x++ + “b” + x++ , you will increment x three times, but if you are using it like “b” + x + “b” + x + “b” + x++ , you increment x only once.