<script type="text/javascript">
$(document).ready(function(){
    var counter = 0;
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.addField'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
             counter++;
            $(wrapper).append('<tr><td><a href="javascript:void(0);" class="removeField" title="Remove Field"><i class="fa fa-times"></i><a></td><td><input id="field_'+counter+'" name="inv['+counter+'][name]" class="form-control input-sm" type="text" /></td><td><input id="field_'+counter+'" name="inv['+counter+'][description]" class="form-control input-sm" type="text" /></td><td><input id="field_'+counter+'" name="inv['+counter+'][qty]" class="form-control input-sm" type="text" /></td><td><div class="input-group"><span class="input-group-addon">$</span><input id="field_'+counter+'" name="inv['+counter+'][price]" class="form-control input-sm" type="text" /></td></div><td><div class="input-group"><span class="input-group-addon">$</span><input id="field_'+counter+'" name="inv['+counter+'][total]" class="form-control input-sm" /></td></div></tr>');
            startStacktable();  //Recreates the mobile version of the table with the added <tr>
        }else{
            alert('Sorry, Only 10 fields per invoice.');
        }

    });
    $(wrapper).on('click', '.removeField', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).closest('tr').remove(); //Remove field html
        x--; //Decrement field counter
    });
    function startStacktable(){
        $('table').stacktable();
    }
    startStacktable();  //Start Stacktable once the page is loaded
});
</script>