动态添加/删除输入行并提交？

i am creating a form for double entry system which will required multiples rows to submit the form , i created the form dynamically with the help of jquery and forms fields works not perfectly all fields are worked but radio buttons create some errors and not working properly ,, and i also want some php code to submit data into table

here is my code ....

    
$(document).ready(function(){
 
     var rowCount = 0;
    
 $(document).on('click', '.add', function(){
  var html = '';
html += '<tr>';
     
html += '<td style="width:90px;"><input type="text"  disabled class="form-control entryid2" value="<?php echo $entry; ?>"  name="entryid2[]" style="width:70px;"/>';
         
html += '<td style="width:170px;" ><input  id="input_date2" type="date" class="form-control date2" value="<?php echo date("Y/m/d"); ?>" name="date2[]" style="width:150px;" required/></td>'; 
        

     
html += '<td><select  name="particular2[]" class="particular2 form-control  show-menu-arrow" data-show-subtext="true" data-live-search="true"  data-validation="required"><option value="-1">select SCOA</option><?php  echo SelectSCOA(); ?></select></td>';
     
     
html += '<td><input type="text"  class="form-control description" value="" name="description[]" /></td>';
     
html += '<td style="width:150px;"><input type="text" style="width:150px;" class="form-control amount" value="" name="amount[]"  required/></td>';
     
 html += '<td><div class="radio" ' + rowCount + '> <label><input type="radio" name="optradio1[0]" value="0"  required  ' + rowCount + '>cr  </label><label><input type="radio" name="optradio1[1]" value="1" required ' + rowCount + '>dr</label></div></td>';    
     
    
     
 html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
     

     
  $('#transaction_table').append(html);
      rowCount++;
     
 });
 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.entryid2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter entry id at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.date2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Date at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.particular2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Select SCOA at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
     $('.description').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Description at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
     
     $('.amount').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Amount at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
     
     $('.radio').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Select Radio at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
     
    
     
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#transaction_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Transaction successFully!</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>

<!DOCTYPE html>
<html>
<head>
    
    <title>Double Entry </title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    
</head>
<body>


<form id="insert_form" method="POST"   onsubmit="return validate(this);">
        
        
        
<div class="container_fluid text-center">
 <button  type="submit"  class="btn btn-primary "  value="submit" name="submit" style="padding-left:50px;padding-right:50px; margin-bottom:20px;margin-top:50px;">Add</button>
</div>
        
        
<div class="container text-center table-responsive">  
    
    <span id="error"></span>
    
<table id="transaction_table"  class="table table-bordered table-striped table-highlight">
<tr colspan="7" >
        
 </tr>
       <thead style="text-align:center;">
        <th>Entry NO</th>
        <th>Date</th>
        <th>Particular</th>
        <th>Description</th>
        <th>Amount</th>
        <th>Cr-Dr</th>
        <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>   
       
      </thead>
        
<tbody>
    

    </tbody>
    </table>
    <script>
    $( "#" ).validate({
    rules: {
        particular1: { required: true }
        
    }
});
    </script>
        
</div>
        
</form>

</body>
</html>

</div>