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'); 
	});

    // remove product row
    $(".delete-row").click(function(e){
    	e.preventDefault();
       	$(this).parent().parent().parent().remove();
    });

    // Changing the total should not affect anything
    calculateTotal();

    $('#invoice_table').on('change keyup paste', '.calculate', function() {
	    updateTotals(this);
	    calculateVat();
	    calculateTotal();
	});


    /*****************************************************
	** Functions
	*****************************************************/

	function updateTotals(elem) {
	    var tr = $(elem).closest('tr'),
	        quantity = $('[name="invoice_product_qty[]"]', tr).val(),
	        price = $('[name="invoice_product_price[]"]', tr).val(),
	        discount = $('[name="invoice_product_discount[]"]', tr).val(),
	        subtotal = parseInt(quantity) * parseFloat(price);

	    // CALCULATE DISCOUNT PERCENTAGE:
	    if(discount && $.isNumeric(discount) && discount !== 0){
	        subtotal = subtotal - ((parseInt(discount) / 100) * subtotal);
	        discountTotal =  discount - subtotal;
	    }

	    $('.calculate-sub', tr).val(subtotal.toFixed(2));
	    $('.invoice-discount').text(parseFloat(discountTotal).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) );  
	}

	function calculateVat(){
		var vatRate = $('.invoice-vat').data('vat-rate');
		var vatMethod =...