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"...

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

$('#invoice_totals').on('input', '.calculate', function () {
    calculateTotal();
});

$('#invoice_product').on('input', '.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', tr).val(subtotal.toFixed(2));
}

function calculateTotal() {
    var grandTotal = 0,
        disc = 0,
  ...