"Add another item" form functionality
<p>I have a form that lets a user enter their career history - it's a very simple form with only 3 fields - type (dropdown), details (textfield) and year (dropdown).</p>

<p>Basically I want to include some dynamic functionality whereby the user can enter multiple items on the same page and then submit them all in one go. I had a search on Google and found some examples but they were all based on tables - my markup is based on DIV tags:</p>

<pre><code>&lt;div class="form-fields"&gt;

&lt;div class="row"&gt;
    &lt;label for="type"&gt;Type&lt;/label&gt;
    &lt;select id="type" name="type"&gt;
      &lt;option value="Work"&gt;Work&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
    &lt;label for="details"&gt;Details&lt;/label&gt;
    &lt;input id="details" type="text" name="details" /&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
    &lt;label for="year"&gt;Year&lt;/label&gt;
    &lt;select id="year" name="year"&gt;
      &lt;option value="2010"&gt;2010&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>So basically the 3 DIV tags with class "row" need to be duplicated, or to simplify things - the div "form-fields" could just be duplicated. I am also aware that the input names would have to converted to array format.</p>

<p>Additionally each item will require a "remove" button. There will be a main submit button at the bottom which submits all the data.</p>

<p>Anyone got an elegant solution for this?</p>
