JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<!-- Page content -->
<div id="page-content-wrapper">
    <!-- Keep all page content within the page-content inset div! -->
    <div class="page-content inset">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">Batch Invoice </div>
                    <div class="panel-body">
<?php var_dump($_POST); ?>
                      
                       <form role="form" class="batchinvoice form-horizontal" id="batchinvoice" name="batchinvoice">
                        <div class="row">
                        <div class="form-group col-md-2">
                            <select class="form-control " name="sl_propid" id="sl_propid"> 
                                <?php foreach($property as $row) :?>
                                <option value="<?php echo $row['id']; ?>"><?php echo $row['property_name'] . " " . $row['property_address1']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                                
                       <div class="form-group col-md-1">
                        <input type="text" name="sl_date"  placeholder="Date" class="sl_date datepicker form-control" id="datepicker">
                        </div>


                        <div class="form-group col-md-2">
                            <input type="text" name="sl_ref" placeholder="Invoice Reference" class="form-control" id="sl_ref">
                        </div>
                         
                        <div class="form-group col-md-2">
                            <select class="form-control" name="sl_nom_id" id="sl_nom_id" >
                          ...

JavaScript

$(function(){
 var i = 0;             var x = 0;
  $.datepicker.setDefaults($.datepicker.regional['']);
  $.datepicker.formatDate( "yy-mm-dd");
  $('#datepicker' ).datepicker();
  $('.vat').each(function(i){
        $(this).click(function(){

            var id = "batchinvoice" + x.toString();
            $('#batchinvoice').clone().attr("name", id).appendTo(".panel-body");
            x++;
                    });
    });

  $('#submit').click(function(){
    var propid = Array();
    var date = Array();
    var ref= Array();
    var id= Array();
    var desc= Array();
    var vat= Array();
    var net= Array();

    $('#batchinvoice[name*="batchinvoice"]').each(function(i){


        propid[i] = $('#sl_propid').val();
        date[i] = $('.sl_date datepicker').val();
        ref[i] = $('#sl_ref').val();
        id[i] = $('#sl_nom_id').val();
        desc[i] = $('#sl_desc').val();
        vat[i] = $('#vat').val();
        net[i] = $('#sl_net').val();
         i++;
     });

    $.ajax({
        type: 'POST',
        url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
        data: { propid : propid, date:"date", ref: ref, id: id, desc: desc, vat: vat, net: net},
        sucess: function(e){
            alert(e.error);
            },
        error: function(e){
            alert(e.error);
            }    
        });

    });
});