JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<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" value="0002">
					</div>
				</div>
			</div>
			<div...

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

.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

$('.item-select').click(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).find('#invoice_product').val(itemText);
		    $(product).find('#invoice_product_price').val(itemText);

   		});

   		return false;

   	});