JSFiddle - React, Tailwind, and code Playground
HTML
<div id="public">
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label for="city">CITY</label>
<input type="text" size="20" autocomplete="off" class="city input-small form-control" placeholder="CITY"/>
</div>
</div>
<div class="col-xs-4 col-md-4">
<div class="form-group">
<label for="state">STATE</label>
<select class="form-control" id="state" onChange="taxRate()">
<option value="">N/A</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
</select>
<input type="hidden" id="tax_percent" name="tax_percent">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-md-5">
<div class="form-group">
<label for="zipCode">ZIP CODE</label>
<input id="zip" type="text" size="6" autocomplete="off" class="zipcode form-control" placeholder="ZIP CODE"/>
</div>
</div>
...
JavaScript
function taxRate() {
var tax_rate = .07;
var order_taxes = 0;
var tax_percent = 0;
var subtotal = document.getElementById("order_subtotal").innerHTML;
subtotal = parseInt(subtotal);
var total = 0;
var state = document.getElementById("state").value;
if (state === 'NJ') {
order_taxes += +(tax_rate * subtotal).toFixed(2);
tax_percent = +(tax_rate * 100).toFixed(2);
}
var el = document.getElementById('order_tax');
el.textContent = order_taxes;
var total = subtotal + order_taxes;
var el1 = document.getElementById('order_total');
el1.textContent = total;
document.getElementById('tax_percent').value = tax_percent;
}