Dynamically adding form elements via jQuery
<p>I have succeeded in setting up the form and making it work. However I have 2 issues:</p>

<p>a) The remove button does not work (it will remove the last row of the form elements) </p>

<p>b) and this is a minor markup issue, when pressing "add" to add a new row of form elements, instead of creating a new <code>&lt;ul&gt;&lt;/ul&gt;</code> it's loaded into the existing row <code>&lt;ul&gt;&lt;/ul&gt;</code></p>

<p>Here's the demo link <a href="http://jsfiddle.net/34rYv/1/" rel="nofollow">http://jsfiddle.net/34rYv/1/</a></p>

<p>And my JS code below</p>

<pre><code>$(document).ready(function() {
$('#btnAdd').click(function() {
    var num = $('.clonedSection').length;
    var newNum = new Number(num + 1);

    var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);

    newSection.children(':first').children(':first').attr('id', 'year_' + newNum).attr('name', 'year_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'qualification_' + newNum).attr('name', 'qualification_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'university_' + newNum).attr('name', 'university_' + newNum);

    $('.clonedSection').last().append(newSection)

    $('#btnDel').attr('disabled', '');

    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
    $('#pq_entry_' + num).remove(); // remove the last element
    // enable the "add" button
    $('#btnAdd').attr('disabled', '');

    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
});

$('#btnDel').attr('disabled', 'disabled');
});​
</code></pre>
