JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td colspan=3>
<h2>Revenue Sources</h2>
</td>
</tr>
<tr>
<td>
<label for="population">Eligible Population</label>
</td>
<td colspan=2>
<input id='population' type="number" value='232510000' />
</td>
</tr>
<tr>
<td>
<label for="totalincome">Total Personal Income</label>
</td>
<td>
<input id='totalincome' type="number" value='13401868693000' />
</td>
<td>
<input id='incomeTax' type="range" value=35 min=0 max=100 onchange='$("#incomeTaxDisplay").val(this.value);SetIncomeTaxRev(this);updtot();' style='width:100px;' />
<input id='incomeTaxDisplay' type="number" min="0" max="100" style='width:50px;' value=35 onchange='$("#incomeTax").val(this.value);SetIncomeTaxRev(this);updtot();' />%</td>
</tr>
<tr>
<td>
<label for="IncomeTaxRev">Income Tax Revenue</label>
</td>
<td colspan=2>
<input id='IncomeTaxRev' value=0 type="number" disabled='disabled' class='revenue' />
</td>
</tr>
<tr>
<td>
<label for="TotalHHCon">Total Household Consumption</label>
</td>
<td>
<input id='TotalHHCon' type="number" value='10729000000000' />
</td>
<td>
<input id='ConTax' type="range" value=15 min=0 max=100 onchange='$("#ConTaxDisplay").val(this.value);SetConTaxRev(this);updtot();' style='width:100px;' />
<input id='ConTaxDisplay' type="number" min="0" max="100" style='width:50px;' value=15 onchange='$("#ConTax").val(this.value);SetConTaxRev(this);updtot();' />%</td>
</tr>
<tr>
<td>
<label for="RealSalesTax">Real Sales Tax</label>
</td>
<td colspan=2>
<input id='RealSalesTax' value='0' type="number" disabled='disabled' style='width:50px' />%</td>
</tr>
<tr>
<td>
...
CSS
h2 {
font-weight:bold;
}
td {
border: solid black 1px;
padding: 5px;
}
.TaxDetails {
width:100px;
}
JavaScript
$(function () {
$("#incomeTax").change();
$("#ConTax").change();
$("#CorpTax").change();
$('input').each(function (i) {
$(this).change(function() {
updtot();
});
});
});
function SetEstTaxRev(elem) {
$("#EstTaxRev").val(
parseFloat(parseFloat($("#TotalEstCon").val()) *
parseFloat(elem.value) * 0.01));
}
function SetCorpTaxRev(elem) {
$("#CorpTaxRev").val(
parseFloat(parseFloat($("#TotalCorpCon").val()) * parseFloat(elem.value) * 0.01));
}
function SetConTaxRev(elem) {
$("#ConTaxRev").val(
parseFloat(parseFloat($("#TotalHHCon").val()) * parseFloat(elem.value) * 0.01));
$("#RealSalesTax").val(
(((elem.value * 0.01) / (1 - elem.value * 0.01)) * 100).toFixed(2));
}
function SetIncomeTaxRev(elem) {
$("#IncomeTaxRev").val(
parseFloat(parseFloat($("#totalincome").val()) * parseFloat(elem.value) * 0.01));
}
function updtot() {
var TotalRev = 0.00;
$('.revenue').each(function (i) {
TotalRev += parseFloat($(this).val());
});
$("#TotalRevenue").val(TotalRev);
$("#RevForBI").val(
parseFloat($("#TotalRevenue").val()) -
parseFloat($("#FedSpending").val()));
CalcAnnualBI();
CalcAnnualBIcons();
CalcPercentGDP();
CalcTotalPersonalIncome();
CalcEffTax();
CalcMaxConsumption();
}
function CalcAnnualBI() {
if ($("#RevForBI").val() > 0) {
$("#AnnualBiBene").val(
(parseFloat($("#RevForBI").val()) / parseFloat($("#population").val())).toFixed(2));
} else {
$("#AnnualBiBene").val(0);
}
}
function CalcAnnualBIcons() {
$("#AnnualBiCons").val(
(parseFloat($("#AnnualBiBene").val()) *
(1 - parseFloat($("#ConTax").val()) * 0.01)).toFixed(2));
}
function CalcPercentGDP() {
$("#PercentGDP").val(
(parseFloat($("#TotalRevenue").val()) /
parseFloat($("#AnnualGDP").val())).toFixed(3) * 100
);
}
function...