JSFiddle - React, Tailwind, and code Playground

HTML

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

		<div class="row">
			<div class="col-xs-6">
				<h1>
logo
				</h1>
			</div>
			<div class="col-xs-6 text-right">
				<h1>INVOICE</h1>
				<div class="input-group col-xs-4 float-right">
					<span class="input-group-addon">#</span>
					<input type="text" id="invoice_id" class="form-control" placeholder="Invoice Number" aria-describedby="sizing-addon1">
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>Customer Information</h4>
					</div>
					<div class="panel-body form-group form-group-sm">
						<div class="row">
							<div class="col-xs-6">
								<input type="text" class="form-control margin-bottom copy-input" id="invoice_name" placeholder="Enter name">
								<input type="text" class="form-control margin-bottom copy-input" id="invoice_address_1" placeholder="Address 1">	
								<input type="text" class="form-control margin-bottom copy-input" id="invoice_town" placeholder="Town">		
								<input type="text" class="form-control copy-input" id="invoice_postcode" placeholder="Postcode">					
							</div>
							<div class="col-xs-6">
								<div class="input-group float-right margin-bottom">
									<span class="input-group-addon">@</span>
									<input type="email" id="invoice_id" class="form-control copy-input" placeholder="E-mail address" aria-describedby="sizing-addon1">
								</div>
							    <input type="text" class="form-control margin-bottom copy-input" id="invoice_address_2" placeholder="Address 2">
							    <input type="text" class="form-control margin-bottom copy-input" id="invoice_county" placeholder="County">
							    <input type="text" class="form-control" id="invoice_phone" placeholder="Phone number">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6...

CSS

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;
}
/* Form validation */
 #response {
    margin: 0 1em 1em 1em;
}

JavaScript

$(document).ready(function () {
    
    // copy customer details to shipping
    $('input.copy-input').on("change keyup paste", function () {
        var thisID = $(this).attr('id');
        $('input#' + thisID + "_ship").val($(this).val());
    });

    // 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', '.calculate', function() {
        updateTotals(this);
        calculateTotal();
    });

	function updateTotals(elem) {
        var tr = $(elem).closest('tr'),
            quantity = $('[name="invoice_product_qty[]"]', tr).val(),
	        price = $('[name="invoice_product_price[]"]', tr).val(),
            percent = $('[name="invoice_product_discount[]"]', tr).val(),
	        subtotal = parseInt(quantity) * parseFloat(price);
        if(percent && $.isNumeric(percent) && percent !== 0){
            subtotal = subtotal - ((parseInt(percent) / 100) * subtotal);
        }
	    $('.calculate-sub', tr).val(subtotal.toFixed(2));
	}

	function calculateTotal(){
	    
	    var grandTotal = 0.0;
	    var totalQuantity = 0;
	    $('.calculate-sub').each(function(){
	        grandTotal += parseFloat($(this).val()) ;
	    });
	    
	    $('.invoice-sub-total').text(parseFloat(grandTotal ).toFixed(2) );  
	}
    
});