title: Dynamically adding form elements via jQuery
body: <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>