Issue when duplicating element in a form -> same names
<p>So I got this:</p>

<p><em><strong>HTML</em></strong></p>

<pre><code>&lt;table id="mytable"&gt;
&lt;tr&gt;
   &lt;td&gt;

   &lt;/td&gt;
   &lt;td&gt;

   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td&gt;
      3. Choose elements:
   &lt;/td&gt;
   &lt;td&gt;
      &lt;select name="antal_tidspunkter" id="antal_tidspunkter"&gt;
         &lt;option value="1" SELECTED&gt;1&lt;/option&gt;
         &lt;option value="2"&gt;2&lt;/option&gt;
         &lt;option value="3"&gt;3&lt;/option&gt;
         &lt;option value="4"&gt;4&lt;/option&gt;
         &lt;option value="5"&gt;5&lt;/option&gt;
      &lt;/select&gt;
   &lt;/td&gt;
&lt;/tr&gt;
    &lt;tr class="highlightedRowStart"&gt;
   &lt;td class="borderLeft"&gt;
      Time
   &lt;/td&gt;
   &lt;td class="borderRight"&gt;
      &lt;select name="seats_timeclock[29]"&gt;
         &lt;option value="08:00"&gt;08:00&lt;/option&gt;
         &lt;option value="08:30"&gt;08:30&lt;/option&gt;
         &lt;option value="09:00"&gt;09:00&lt;/option&gt;
         &lt;option value="09:30"&gt;09:30&lt;/option&gt;
         &lt;option value="10:00"&gt;10:00&lt;/option&gt;
         &lt;option value="10:30"&gt;10:30&lt;/option&gt;
         &lt;option value="11:00"&gt;11:00&lt;/option&gt;
         &lt;option value="11:30"&gt;11:30&lt;/option&gt;
         &lt;option value="12:00"&gt;12:00&lt;/option&gt;
         &lt;option value="12:30"&gt;12:30&lt;/option&gt;
         &lt;option value="13:00"&gt;13:00&lt;/option&gt;
         &lt;option value="13:30"&gt;13:30&lt;/option&gt;
         &lt;option value="14:00"&gt;14:00&lt;/option&gt;
         &lt;option value="14:30"&gt;14:30&lt;/option&gt;
         &lt;option value="15:00"&gt;15:00&lt;/option&gt;
         &lt;option value="15:30"&gt;15:30&lt;/option&gt;
         &lt;option value="16:00"&gt;16:00&lt;/option&gt;
         &lt;option value="16:30"&gt;16:30&lt;/option&gt;
         &lt;option value="17:00"&gt;17:00&lt;/option&gt;
         &lt;option value="17:30"&gt;17:30&lt;/option&gt;
         &lt;option value="18:00" SELECTED&gt;18:00&lt;/option&gt;
         &lt;option value="18:30"&gt;18:30&lt;/option&gt;
         &lt;option value="19:00"&gt;19:00&lt;/option&gt;
         &lt;option value="19:30"&gt;19:30&lt;/option&gt;
         &lt;option value="20:00"&gt;20:00&lt;/option&gt;
         &lt;option value="20:30"&gt;20:30&lt;/option&gt;
         &lt;option value="21:00"&gt;21:00&lt;/option&gt;
         &lt;option value="21:30"&gt;21:30&lt;/option&gt;
         &lt;option value="22:00"&gt;22:00&lt;/option&gt;
         &lt;option value="22:30"&gt;22:30&lt;/option&gt;
      &lt;/select&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="highlightedRowMiddle"&gt;
   &lt;td class="borderLeft"&gt;
      2:
   &lt;/td&gt;
   &lt;td class="borderRight"&gt;
      &lt;select name="seats_free_2tables[29]"&gt;
         &lt;option value="0"&gt;0&lt;/option&gt;
         &lt;option value="1"&gt;1&lt;/option&gt;
         &lt;option value="2" SELECTED&gt;2&lt;/option&gt;
         &lt;option value="3"&gt;3&lt;/option&gt;
         &lt;option value="4"&gt;4&lt;/option&gt;
         &lt;option value="5"&gt;5&lt;/option&gt;
         &lt;option value="6"&gt;6&lt;/option&gt;
         &lt;option value="7"&gt;7&lt;/option&gt;
         &lt;option value="8"&gt;8&lt;/option&gt;
         &lt;option value="9"&gt;9&lt;/option&gt;
         &lt;option value="10"&gt;10&lt;/option&gt;
         &lt;option value="11"&gt;11&lt;/option&gt;
         &lt;option value="12"&gt;12&lt;/option&gt;
         &lt;option value="13"&gt;13&lt;/option&gt;
         &lt;option value="14"&gt;14&lt;/option&gt;
         &lt;option value="15"&gt;15&lt;/option&gt;
         &lt;option value="16"&gt;16&lt;/option&gt;
         &lt;option value="17"&gt;17&lt;/option&gt;
         &lt;option value="18"&gt;18&lt;/option&gt;
         &lt;option value="19"&gt;19&lt;/option&gt;
         &lt;option value="20"&gt;20&lt;/option&gt;
      &lt;/select&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=""&gt;
   &lt;td class="borderLeft"&gt;
     4:
   &lt;/td&gt;
   &lt;td class="borderRight"&gt;
      &lt;select name="seats_free_4tables[29]"&gt;
         &lt;option value="0"&gt;0&lt;/option&gt;
         &lt;option value="1"&gt;1&lt;/option&gt;
         &lt;option value="2"&gt;2&lt;/option&gt;
         &lt;option value="3"&gt;3&lt;/option&gt;
         &lt;option value="4" SELECTED&gt;4&lt;/option&gt;
         &lt;option value="5"&gt;5&lt;/option&gt;
         &lt;option value="6"&gt;6&lt;/option&gt;
         &lt;option value="7"&gt;7&lt;/option&gt;
         &lt;option value="8"&gt;8&lt;/option&gt;
         &lt;option value="9"&gt;9&lt;/option&gt;
         &lt;option value="10"&gt;10&lt;/option&gt;
         &lt;option value="11"&gt;11&lt;/option&gt;
         &lt;option value="12"&gt;12&lt;/option&gt;
         &lt;option value="13"&gt;13&lt;/option&gt;
         &lt;option value="14"&gt;14&lt;/option&gt;
         &lt;option value="15"&gt;15&lt;/option&gt;
         &lt;option value="16"&gt;16&lt;/option&gt;
         &lt;option value="17"&gt;17&lt;/option&gt;
         &lt;option value="18"&gt;18&lt;/option&gt;
         &lt;option value="19"&gt;19&lt;/option&gt;
         &lt;option value="20"&gt;20&lt;/option&gt;
      &lt;/select&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="highlightedRowEnd"&gt;
   &lt;td class="borderLeft"&gt;
      Converttable
   &lt;/td&gt;
   &lt;td class="borderRight"&gt;
      &lt;select name="seats_converttables[29]"&gt;
         &lt;option value="0"&gt;0&lt;/option&gt;
         &lt;option value="1"&gt;1&lt;/option&gt;
         &lt;option value="2" SELECTED&gt;2&lt;/option&gt;
         &lt;option value="3"&gt;3&lt;/option&gt;
         &lt;option value="4"&gt;4&lt;/option&gt;
         &lt;option value="5"&gt;5&lt;/option&gt;
         &lt;option value="6"&gt;6&lt;/option&gt;
         &lt;option value="7"&gt;7&lt;/option&gt;
         &lt;option value="8"&gt;8&lt;/option&gt;
         &lt;option value="9"&gt;9&lt;/option&gt;
         &lt;option value="10"&gt;10&lt;/option&gt;
         &lt;option value="11"&gt;11&lt;/option&gt;
         &lt;option value="12"&gt;12&lt;/option&gt;
         &lt;option value="13"&gt;13&lt;/option&gt;
         &lt;option value="14"&gt;14&lt;/option&gt;
         &lt;option value="15"&gt;15&lt;/option&gt;
         &lt;option value="16"&gt;16&lt;/option&gt;
         &lt;option value="17"&gt;17&lt;/option&gt;
         &lt;option value="18"&gt;18&lt;/option&gt;
         &lt;option value="19"&gt;19&lt;/option&gt;
         &lt;option value="20"&gt;20&lt;/option&gt;
      &lt;/select&gt;
   &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="spacer"&gt;
   &lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><em><strong>jQuery</em></strong></p>

<pre><code>$(document).ready(function() {

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i &lt; this.value; i++) {
            $("#mytable tr:gt(1):lt(5)").clone().appendTo("#mytable");
        }
    });
});
</code></pre>

<p><strong>DEMO:</strong> <a href="http://jsfiddle.net/bTWQg/" rel="nofollow">http://jsfiddle.net/bTWQg/</a></p>

<p>Works like this, when you change the number of elements in the selector, it adds more elements.</p>

<p>My issue with this is that when it duplicate the element, it keeps the name: <code>seats_timeclock[29]</code> so later when I'm working with the handling of the form (<strong>PHP</strong>), I only receive one element's data.</p>

<p>Is there anyway to add a random number inside <code>[]</code> from <code>11111, 99999</code> each time the element gets duplicated? Otherwise i can't grab the data filled on the new elements..</p>
