Create Dynamic row on clock on button and save Record in Table

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

                <!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

   <!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>--> 

                <script type="text/javascript">

                $(document).ready(function () { 

                 $(document).on("click", ".classAdd", function ()

                 {

      

           var rowCount = $('.data-contact-person').length + 1;

           var contactdiv = '<tr class="data-contact-person">' + 

               '<td><input type="text" name="f-name' +rowCount  + '" class="form-control f-name01"/></td>' +'<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' + 

               '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +'<td><select id="checkboxValues01"  name="checkboxValues' + rowCount + '" class="form-control checkboxValues01" ><option class="form-control optionA"  value="B-Tech">B-Tech</option><option class="form-control optionB" value="MCA">MCA<option></select></td>'+

               '<td><input type="radio" name="radioValue01" value="Male" class="radioValue'+rowCount +'"/>Male<input type="radio" name="radioValue01" value="Female" class="radioValue'+rowCount+'"/>Female</td>' +

                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' + 

                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' + 

                '</tr>'; 

            $('#maintable').append(contactdiv); // Adding these controls to Main table class 

        }); 

    });

    $(document).on("click", ".deleteContact", function () { 

            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls  

}); 

    var siteUrl = 'http://NGO/sites/NGO/';

    function createListItem()

    {

        // alert('in function ');

         var clientContext = new SP.ClientContext(siteUrl);

         $('tr.data-contact-person').each(function ()

         {   

           var firstName = $(this).find('.f-name01').val();//Bind to the first name with class f-name01 

           var lastName = $(this).find('.l-name01').val();//Bind to the last name with class l-name01 

           var emailId = $(this).find('.email01').val();//Bind to the emailId with class email01

           var coursesval = $(this).find('select.checkboxValues01').val();

         //  alert(coursesval);

          // var radioVal = $(this).find('.radioValue01').val();

           // var radioVal=$('input[name=radioValue01]:checked').val();

           var radioVal = $('input:radio[name=radioValue01]:checked').val();

           alert(radioVal);

           var itemCreateInfo = new SP.ListItemCreationInformation();

           var oList = clientContext.get_web().get_lists().getByTitle('DynamicCustomList');

           var oListItem = oList.addItem(itemCreateInfo);

          oListItem.set_item('FName',firstName);

          oListItem.set_item('LName',lastName);

          oListItem.set_item('Email',emailId);

          oListItem.set_item('Courses',coursesval);

          oListItem.set_item('Sex',radioVal);

          oListItem.update();

          clientContext.load(oListItem);

          });

       

       

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

        e.preventDefault();

    }

    function onQuerySucceeded()

      {

      alert('Item Created Succesfully');

       }

    function onQueryFailed(sender, args)

     {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

     }

                </script>             

                                 

   <title>Demo</title> 

  

  

<head>

<meta name="WebPartPageExpansion" content="full" />

</head>

<body> 

   <head>

</head>

<form id="form1"> 

       <div class="container">              <h2>Basic Table</h2> 

           <table class="table" id="maintable" > 

                <thead> 

                   <tr> 

                     <th>First Name</th>          

                     <th>Last Name</th>                         

                     <th>Email</th>

                     <th>Courses</th>

                      <th>Sex</th>                

                      </tr> 

                </thead> 

                <tbody> 

                   <tr class="data-contact-person"> 

                      <td> 

                           <input type="text" name="f-name" class="form-control f-name01" /></td> 

                      <td> 

                          <input type="text" name="l-name" class="form-control l-name01" /></td> 

                      <td> 

                           <input type="text" name="email" class="form-control email01" /></td>

                             <td><select id="checkboxValues" name="checkboxValues" class="form-control checkboxValues01"><option class="form-control optionA01" value="B-Tech">

                                                                                                                                B-Tech</option><option class="form-control optionB01" value="MCA">

                                                                                                                                MCA</option></select></td>

                               <td><input type="radio" name="radioValue01" value="Male" class="radioValue" id="radioButon1" checked="true"/>Male<input type="radio" name="radioValue01" value="Female" class="radioValue" id="radioButon2"/>Female</td>

                          <td> <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">

                                                                                                                Add More</button> 

                      </td> 

                    

                  </tr> 

                             </tbody> 

        </table> 

           <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm" onclick="createListItem();">

                                                Submit</button> 

       </div> 

    </form> 

</body> 

</asp:Content>