JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<h1>Create invoice</h1>
		<hr>

		<form method="post" id="create_invoice">
			<input type="hidden" name="action" value="create_invoice">
			<div class="row">
				<div id="response" class="alert alert-success" style="display:none;">
					<a href="#" class="close" data-dismiss="alert">&times;</a>
					<div class="message"></div>
				</div>

				<div class="col-xs-5">
					<h1>
						<img src="images/ambient-lounge-logo.gif" class="img-responsive">
					</h1>
				</div>
				<div class="col-xs-7 text-right">
					<h1>INVOICE</h1>
					<div class="col-xs-4 no-padding-right">
				        <div class="form-group">
				            <div class="input-group date" id="invoice_date">
				                <input type="text" class="form-control required" name="invoice_date" placeholder="Select invoice date" data-date-format="DD/MM/YYYY" />
				                <span class="input-group-addon">
				                    <span class="glyphicon glyphicon-calendar"></span>
				                </span>
				            </div>
				        </div>
				    </div>
				    <div class="col-xs-4">
				        <div class="form-group">
				            <div class="input-group date" id="invoice_due_date">
				                <input type="text" class="form-control required" name="invoice_due_date" placeholder="Select due date" data-date-format="DD/MM/YYYY" />
				                <span class="input-group-addon">
				                    <span class="glyphicon glyphicon-calendar"></span>
				                </span>
				            </div>
				        </div>
				    </div>
					<div class="input-group col-xs-4 float-right">
						<span class="input-group-addon">#AMBMN</span>
						<input type="text" name="invoice_id" id="invoice_id" class="form-control required" placeholder="Invoice Number" aria-describedby="sizing-addon1"...

CSS

/*******************************************************************************
* Simplified PHP Invoice System                                                *
*                                                                              *
* Version: 1.0	                                                               *
* Author:  James Brandon                                    				   *
*******************************************************************************/

body {
	padding: 2em 0; 
}

.panel-body {
	padding: 15px 15px 0 15px;
}

}
.float-left {
	float: left !important;
}

.float-right {
	float: right !important;
}

.margin-bottom {
	margin-bottom: 1em;
}

.margin-top {
	margin-top: 1em;
}

.padding-right {
	padding-right: 15px;
}

.no-padding-right {
	padding-right: 0;
}

.no-margin-bottom {
	margin-bottom: 0;
}

/* Forms */
#response {
	margin: 0 1em 1em 1em;
}

.delete-row {
	float: left;
	margin-top: 4px;
}

.item-select {
	float: left;
	margin: 4px;
}

.item-input {
	float:  left;
	width: 65%;
	margin-left: 10px;
}

/* Other styles */
strong.shipping {
	margin-top: 4px;
	display: block;
}

JavaScript

$(document).on('click', ".item-select", function(e) {

   		e.preventDefault;

   		var product = $(this);

   		$('#insert').modal({ backdrop: 'static', keyboard: false }).one('click', '#selected', function(e) {

		    var itemText = $('#insert').find("option:selected").text();
		    var itemValue = $('#insert').find("option:selected").val();

		    $(product).closest('tr').find('#invoice_product').val(itemText);
		    $(product).closest('tr').find('#invoice_product_price').val(itemValue);

		    //updateTotals('#invoice_table');
        	//calculateTotal();

   		});

   		return false;

   	});

// add new product row on invoice
    var cloned = $('#invoice_table tr:last').clone();
    $(".add-row").click(function(e) {
        e.preventDefault();
        cloned.clone().appendTo('#invoice_table'); 
    });
    
    calculateTotal();
    
    $('#invoice_table').on('change keyup paste touchend', '.calculate', function() {
        updateTotals(this);
        calculateTotal();
    });

    $('#invoice_totals').on('change keyup paste touchend', '.calculate', function() {
        calculateTotal();
    });

	function updateTotals(elem) {

        var tr = $(elem).closest('tr'),
            quantity = $('[name="invoice_product_qty[]"]', tr).val(),
	        price = $('[name="invoice_product_price[]"]', tr).val(),
            isPercent = $('[name="invoice_product_discount[]"]', tr).val().indexOf('%') > -1,
            percent = $.trim($('[name="invoice_product_discount[]"]', tr).val().replace('%', '')),
	        subtotal = parseInt(quantity) * parseFloat(price);

        if(percent && $.isNumeric(percent) && percent !== 0) {
            if(isPercent){
                subtotal = subtotal - ((parseFloat(percent) / 100) * subtotal);
            } else {
                subtotal = subtotal - parseFloat(percent);
            }
        } else {
            $('[name="invoice_product_discount[]"]', tr).val('');
        }

	    $('.calculate-sub',...