JSFiddle - React, Tailwind, and code Playground
HTML
<table onload="updtot()">
<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='150510000' />
</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=30 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='30' 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' />
</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=0 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='0' 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>
...
CSS
h2 {
font-weight:bold;
}
td {
border: solid black 1px;
padding: 5px;
}
.TaxDetails {
width:100px;
}
JavaScript
$(function () {
$( "#incomeTax" ).change();
$( "#ConTax" ).change();
$( "#CorpTax" ).change();
});
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 starttot(){
("#incomeTaxDisplay").val("#incomeTax");
SetIncomeTaxRev("#IncomeTaxRev") ;
SetCorpTaxRev("#CorpTaxRev");
updtot();
}
function updtot() {
$("#TotalRevenue").val(
parseFloat($("#IncomeTaxRev").val()) + parseFloat($("#ConTaxRev").val()) + parseFloat($("#CorpTaxRev").val()));
$("#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));
}
}
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 CalcTotalPersonalIncome() {
$('input[name=TotInc]').each(function (i) {
$(this).val(
(parseFloat(
$(this).parent('td').prev('td').children('input').val()) * (1 -...