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">
                        <form role="form" class="batchinvoice form-horizontal" id="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="form-control" id="sl_date 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...

JavaScript

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



    $('#batchinvoice .vat').click(function () {
        alert("ok");
        var id = "batchinvoice" + clone_iterator;
        $('#batchinvoice').clone(true).attr("name", id).attr('id', id).appendTo(".panel-body"); // here I added this .attr('id',id)
        // here we'll change the id's of all the elements who actualy have an attribute

        $('#' + id + ' *[id]').each(function () {

            $(this).attr('id', $(this).attr('id') + clone_iterator); //we set the attribute id
        });
        clone_iterator++;
    });



    $('body').click(function () {
        var res = {};
        console.log(res);
        $('.batchinvoice').each(function (i) { //the class is a good use to do things like that you can repeat it more than once !
            res[i] = new Array();
            console.log(res);

            res[i].propid = $(this).find('*[name=sl_propid]').val();
            res[i].date = $(this).find('.sl_date datepicker').val();
            res[i].ref = $(this).find('*[name=sl_ref]').val();
            res[i].id = $(this).find('*[name=sl_nom_id]').val();
            res[i].desc = $(this).find('*[name=sl_desc]').val();
            res[i].vat = $(this).find('*[name=vat]').val();
            res[i].net = $(this).find('*[name=sl_net]').val();
            console.log(res);

            // i++;   
            //$.each('',function( index, value ){}
            //(int)i is already incremented if you use class and not IDS

        });
        console.log(res);

        $.ajax({
            type: 'POST',
            url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
            data: res,
            sucess: function (e) {
                alert(e.error);
            },
            error: function (e) {
                alert(e.error);
            }
        });

 ...