JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
<h2>
Massachusetts Check Calculator - BiWeekly
</h2>
<input type="text" id="gross" value="5657.30">
<button role="calc">
  calc
</button>
<table class="table">
  <thead>
    <tr>
      <th>Gross</th>
      <th>Fed</th>
      <th>SS</th>
      <th>Med</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody id="calc">

  </tbody>
</table>
<span class="pull-right">
<label>net</label>
<input type="text" disabled id="net" class="text-right"/>
</span>
</div>

CSS

table {
  width: 100%;
}

thead th {
  text-align: left;
}

JavaScript

var fedTable = {
  "S": [{
    "min": "0",
    "max": "2250",
    "flat": "0.00",
    "percent": "0"
  }, {
    "min": "2250",
    "max": "11525",
    "flat": "0.00",
    "percent": "10"
  }, {
    "min": "11525",
    "max": "39900",
    "flat": "927.50",
    "percent": "15"
  }, {
    "min": "39900",
    "max": "93400",
    "flat": "5183.75",
    "percent": "25"
  }, {
    "min": "93400",
    "max": "192400",
    "flat": "18558.75",
    "percent": "28"
  }, {
    "min": "192400",
    "max": "415600",
    "flat": "46278.78",
    "percent": "33"
  }, {
    "min": "415600",
    "max": "417300",
    "flat": "119934.75",
    "percent": "35"
  }, {
    "min": "417300",
    "max": "1000000000000",
    "flat": "120529.75",
    "percent": "39.6"
  }, ],
  "M": [{}]
}

function calcFed(status, freq, taxable) {

  var payFrequency = 26;
  var fedAmount = 0.00;
  var fedTaxable = taxable * payFrequency;

  if (status = "S") {

    $.each(fedTable.S, function() {

      if (fedTaxable >= this.min && fedTaxable < this.max) {
        fedAmount = (parseFloat(this.flat) +
          ((fedTaxable - parseFloat(this.min)) * (parseFloat(this.percent) / 100))) / payFrequency;
        return false;
      }

    })

  }
  return fedAmount;
}


$('button[role="calc"]').click(function() {

  var amount = parseFloat($('#gross').val()).toFixed(2);

  var fedWitholding = calcFed("S", 26, amount);
  var ssWitholding = amount * .062;
  var medWitholding = amount * .0145;
  var stateWitholding = (amount - (2000 / 26)) * 0.051;

  var $calc = $('#calc');
  $calc.children().remove();
  var $tr = $('<tr/>');
  var $gross = $('<td/>').html(amount).appendTo($tr);
  var $fed = $('<td/>').html(fedWitholding.toFixed(2)).appendTo($tr);
  var $ss = $('<td/>').html(ssWitholding.toFixed(2)).appendTo($tr);
  var $med = $('<td/>').html(medWitholding.toFixed(2)).appendTo($tr);
  var $state = $('<td/>').html(stateWitholding.toFixed(2)).appendTo($tr);

  $tr.appendTo($calc)

	var net = amount - fedWitholding -...