JSFiddle - React, Tailwind, and code Playground

by jaydurst

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=0 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:25px;' value='0' 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:25px;' 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>
        <td>
          ...

CSS

h2 {
        font-weight:bold;
    }
    
    td {
          border: solid black 1px;
          padding: 5px;
      }
.TaxDetails {
     width:100px;   
}

JavaScript

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() {
    $("#TotalRevenue").val(
    parseFloat($("#IncomeTaxRev").val()) + parseFloat($("#ConTaxRev").val()) + parseFloat($("#CorpTaxRev").val()));
    
    CalcAnnualBI();
    CalcAnnualBIcons();
    CalcPercentGDP();
    
    CalcTotalPersonalIncome();
    CalcEffTax();
    CalcMaxConsumption();
}

function CalcAnnualBI(){
       $("#AnnualBiBene").val(
                (parseFloat($("#TotalRevenue").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 - (parseFloat(
                     $( "#incomeTax" ).val())) * 
                         0.01) + parseFloat(
                             $( "#AnnualBiBene" ).val()
                         )).toFixed(2));
});}

function CalcEffTax(){
   ...