JSFiddle - React, Tailwind, and code Playground

HTML

<main>
	<h1>Stamp Duty Tax Calculator 2016</h1>
	
	<section id="input-section">
		<p id="error-msg">Please enter numerical value</p>
		<div id="currency">&pound;</div>
		<input type="text" id="input-value" placeholder="Please enter the price of the property you wish to calculate">
		<label>
			<input id="second-home" type="checkbox" /> Property is a buy to let or second home?
		</label>
		<button type="button" id="calculate">Calculate Stamp Duty</button>
	</section>
	
	<section id="results-section">
		<h3>Results</h3>
		<section id="stamp">
			<h4>Stamp Duty To Pay</h4>
			<div id="results"></div>
		</section>
		
		<section id="rate">
			<h4>Effective Rate</h4>
			<div id="effective-rate"></div>
		</section>
	</section>
	
	<section id="explained">
		<table id="explained-table">
			<tr>
				<th>Tax Band</th>
				<th>&#37;</th>
				<th>Taxable Sum</th>
				<th>TAX</th>
			</tr>
		</table>
	</section>
	
	<button type="button" value="Reset calculator" id="reset">Reset Calculator</button>
	
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="script.js"></script>
<body>
	
</body>

CSS

body {
	font-family: Helvetica, sans-serif, serif;
}

main {
	width: 800px;
	background-color: #fdfdfd;
}

#currency {
	display: inline-block;
	padding: 0.5em 0.7em 0.5em 0.7em;
	background-color: #f2f2f2;

}

#input-value {
	width: 26em;
	display: inline-block;
	padding: 0.65em 0.5em 0.5em 0.5em;
	margin-left: -5px;
} 

label {
	display: block;
	margin: 1em 0 1em 0;
}

#calculate, #reset {
	width: 15em;
	font-weight: bold;
	padding: 0.8em;
	background-color: #15acfc;
	border: none;
	color: #eaeaea;
}

#calculate:hover, #reset:hover {
	background-color: #0f9ae3;
	cursor: pointer;
	color: #fff;
}

#rate, #stamp {
	margin: 2em 0 2em 0;
}

#explained-table {
	background: #f2f2f2;
	border-top: 1px solid #d4d4d4;
	border-bottom: 1px solid #d4d4d4;
	margin: 2em 0 2em 0;
	width: 800px
}

#explained-table th, #explained-table td {
	width: 7em;
	border-left: 1px solid #d4d4d4;
	border-right: 1px solid #d4d4d4;
		border-bottom: 1px solid #d4d4d4;
	text-align: left;
	padding: 0.5em;
}

JavaScript

$(function (jQuery) {
	 
	//array of objects to contain multiple properties of the same name, 2 for each taxband
	 
	 (function stampDutyCalculator() {
	 
	 var taxbands = [
		 {
			 min: 0,
			 max: 125000,
			 percent: 0
		 },
		 {
			 min: 125000,
			 max: 250000,
			 percent: 0.02
		 },
		 {
			 min: 250000,
			 max: 925000,
			 percent: 0.05
		 },
		 {
			 min: 925000,
			 max: 1500000,
			 percent: 0.1
		 },
		 {
			 min: 1500000,
			 max: null,
			 percent: 0.12
		 }
	 ];
		 
	 var secondTaxbands = [
		 {
			 min: 0,
			 max: 125000,
			 percent: 0.03
		 },
		 {
			 min: 125000,
			 max: 250000,
			 percent: 0.05
		 },
		 {
			 min: 250000,
			 max: 925000,
			 percent: 0.08
		 },
		 {
			 min: 925000,
			 max: 1500000,
			 percent: 0.13
		 },
		 {
			 min: 1500000,
			 max: null,
			 percent: 0.15
		 }
	 ];
	 //row template to add to table, tags replaced with content
	 var tableRow = "<tr><td>{taxband}</td><td>{percent}</td><td>{taxable}</td><td class='tax'>{TAX}</td></tr>", 
		 table = $("#explained-table"),
		 results = $("#results"),
		 effectiveRate = $("#effective-rate");
	 	
		 $('#calculate').on('click', function calculateButton() {
			 if ($("#input-value").val() !== '') { //only run function if something is entered 
				calculateStampDuty();
			 }
		 });

		 function calculateStampDuty() {

			var bands = taxbands,		 
		 		userInput = parseInt($("#input-value").val(), 10), //grabs value of input field and parses it as a number
				row;

			if ($('#second-home').is(':checked')) { //if checkbox is selected change value of bands variable
				bands = secondTaxbands;
			}
			 	 
			if (table.length) {  //prevents tables being printed multiple times 
				table.find("tr:gt(0)").remove(); //gets all rows higher than row 1 and removes 
			}
			 
			var taxableSum = function (x, y) { //function expression to calculate taxable sum, takes 2 parameters
				var maxBand = (x !== null) ? Math.min(x, userInput) : maxBand = userInput; //returns the value lowerest...