JSFiddle - React, Tailwind, and code Playground

by David Bunch

HTML

<div id="container">
	<div id="header">
		<div id="insideheader">
			<div id="rightinfo">	
				<ul id="rightheader">
			
				</ul>
		    </div>
		    <div id="logo">
				<ul id="logo_ul">
					
					<li>&nbsp;</li>
				</ul>
		    </div>
	    </div>
    </div>



<!--Begin the Total container section----------------------------------------------------------------------------------------------------------------->
<div id="tc_left">
	<div>Total Quote Amount:&nbsp;&nbsp;</div>
	<input class="dollars" id="tqa"  />
	<div>Product Subtotal:&nbsp;&nbsp;</div>
	<input class="dollars" id="subtotal" />
	<div>Tax:&nbsp;&nbsp;</div>
	<input class="dollars" id="tax" value="$0.00" />
	<div>Shipping and Handling:&nbsp;&nbsp;</div>
	<input class="dollars" id="sandh" value="$0.00" />
	<div>Shipping Method:&nbsp;&nbsp;</div>
	<input class="dollars" id="someID_defaults" value="Ground" />

</div>

<div id="tc_right">

	<input type="text" class="dollars_right" />	<br />
	<input type="text" class="dollars_right" />	<br />
	<input type="text" class="dollars_right" />	<br />
	<input type="text" class="dollars_right" />	<br />
	<div id="tng">Total Number of Groups:</div>
	<input type="text" class="dollars_right" value="0" />

</div>

<!--Begin the group sections------------------------------------------------------------------------------------------------------------------------>


<div class="groupcontainer">
	<div class="behindgroup">
		<form class="groupForm">
			<label class="gcLabel">Group: </label>
		    <input type="text" class="input_class" />
				
			<label class="gcLabel">Quantity: </label>
		    <input type="text"  class="input input_class" />
		    				
			<label class="gcLabel">System Price:</label>
		    <input type="text"  class="input2 input_class" />
		    				
			<label class="gcLabel">Group Total: </label>
		    <input type="text" class="grouptotal input_class" />
		</form>
	</div>
	
	
<!--begin the specs...

CSS

<style type="text/css">
/* main container*/
#container {
	position:relative;
	margin:auto;
	width:650px;
	min-height:500px;
	border:1px solid black;
}

/* All the header shit */
#header {
	width:650px;
	border-bottom:1px solid black;
	height:100px;
	background-color: #a9b5fd;
}

#insideheader {
	margin-top: 7px;
	float: left;
	width: 650px;
	height: 85%;
	background-color: #b4bffd;
}

#logo {
	position:absolute;
	float:left;
	margin-left:5px;
	margin-top:11px;
	border-radius: 15%;
	font-weight: bold;
	font-family:Arial;
}

#logo_ul {
	float:left;
	list-style-type:none;
	margin:5px;
	padding:0;
	font-family:Arial;
	font-size: 10px;	
}

#mcp {
	font-size:40px; 
	font-family:Arial; 
	font-weight:bold
	
}

#address {
	font-size:10px;
	font-family:Arial;
}

#rightinfo {
	float:right;
	position:relative;
	overflow: hidden;
	font-size:12px;
	font-family:Arial;
	margin-right:5px;
	margin-top:15px;
	border-radius: 15%;
	font-weight: bold;
}

#rightheader {
	position:relative;
	list-style-type:none;
	padding:0px;
	margin:5px;
}


/* All the total cost shit */

#tc_left {
	width:49.5%;
	position:relative;
	float:left;
	min-height:50px;
	font-family:Arial;
	font-size:12px;
    font-weight:bold;
}

#tc_left div {
	padding-top:4px;
	min-width:50%;
	height:15px;
	font-family:Arial;
	font-size:12px;
	float:left;
	text-align:right;
}

#tc_right {
	width:49.5%;
	position:relative;
	float:left;
	min-height:50px;
}

#tc_right div {
	padding-top:4px;
	height:15px;
	font-family:Arial;
	font-size:12px;
	float:left;
}

.dollars {
	type:number;
	width:150px;
	float:left;
	top:10px;
	border:1px solid white;

}

.dollars_right {
	type:number;
	float:right;
	border:1px solid white;
}



#total_left {
	border: 5px solid orange;
	float:left;
	width: 47%;
	display: inline-block;
	font-family:Arial;
	font-size:12px;
}

#totalcontainer #total_left div {
	float:left;
	width:20px;
}

#tng...

JavaScript

$(document).ready(function() {
	  $('#clone').click(function() {
	    var target = $(this).closest('.groupcontainer');
	    target.clone(true, true).insertAfter(target);
	  });
	  
	  $('.input').on('input',function(){
	    $(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input2').val());
      $('.grouptotal').change();
	  });
	
	  $('.input2').on('input', function(){
	    $(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input').val());
         $('.grouptotal').change();
	  });
	  $('.input2').dblclick(function(){
	    $(this).parent().children('.input2').autoNumeric('init', {aSign: "$ "});
	  });  
 	  $('.grouptotal').dblclick(function(){
	    $(this).parent().children('.grouptotal').autoNumeric('init', {aSign: "$ "});
	  });
	  $('#subtotal').dblclick(function(){
	    $(this).parent().children('#subtotal').autoNumeric('init', {aSign: "$ "});
	  });
	  $('.reset').click(function(){
	  	$('.behindgroup').parent().children().find('input, textarea').val('');
	  });
	});  
	

	$(document).on('change', '.grouptotal', function(){
	  var sum = 0;
	    $('.grouptotal').each(function(){
	    sum += +$(this).val();
	    });
	    $('#subtotal').val(sum);
		  });