How to use jQuery to add form elements dynamically

Answer 1

Try this way:-

Demo

HTML

Create a template extraPersonTemplate and use it to construct further. Add a container tyo your content section.

    

        
        
        
            Male
            Female
        
    

JS

  $(document).ready(function () {
     $('
', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container'); //Get the html from template
     $('#addRow').click(function () {
           $('
', {
               'class' : 'extraPerson', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.

     });
 })
 function GetHtml() //Get the template and update the input field names
{
      var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=firstname]')[0].name="firstname" + len;
    $html.find('[name=lastname]')[0].name="lastname" + len;
    $html.find('[name=gender]')[0].name="gender" + len;
    return $html.html();    
}

Small Css

.extraPersonTemplate {
    display:none;
}