JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<header>
    <h1> Path of Exile EHP Calc</h1>
  </header>
  <hr>
  <div id='options'>
    <div class='config stats'>
      <p>HP:
          <input id='hp' value='4000'></input>
      </p>
      <p>Armour(Before Acro penalty):
          <input id='armour' value='0'></input>
      </p>
      <p>Evasion:
          <input id='evasion' value='0'></input>
      </p>
      <p>Acrobatics (30% dodge):
          <input type='checkbox' id='acrobatics'></input>
      </p>
      <p>Phase Acrobatics (40% dodge):
          <input type='checkbox' id='phaseacro'></input>
      </p>
      <p>Additional Dodge:
          <input id='dodge' value='0'></input>
      </p>
      <p>Block(Before Acro Penalty):
          <input id='block' value='0'></input>
      </p>
      <p>Unwavering Stance (Can't Evade):
          <input type='checkbox' id='unwavering'></input>
      </p>
      <hr>
      <p>Monster Level:
          <input id='monsterlevel' value='68'></input>
      </p>
      <p>Average Monster Damage at Lvl <span id='monsterdamageLevel'></span> : <b><span id='monsterdamage'></span></b></p>
    </div>
    <div class='config buffs'>
      <p>Endurance charges:
          <input id='end-charges' value='0'></input>
      </p>
      <p>Fortify (25%)
          <input type='checkbox' id='fortify'></input>
      </p>
      <p>Rampart (28%, fortify passive tree point)
          <input type='checkbox' id='rampart'></input>
      </p>
      <p>Heart of steel (4%)
          <input type='checkbox' id='heartofsteel'></input>
      </p>
      <p>Chaos Golem (4%)
          <input type='checkbox' id='chaos-golem'></input>
      </p>
      <p>Abyssus (-40%)
          <input type='checkbox' id='abyssus'></input>
      </p>
      <p>Enfeeble Reduction %:
          <input id='enfeeble' value='0'></input>
      </p>
      <p>Arctic Armour Level:
          <input id='aa' value='0'></input>
      </p>
     ...

CSS

body,html {
  font-family: Arial
}

table tr {
  padding: 1em;
}
table td {
  padding: 1em;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.config {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin-right:2em;
}

header {
  padding: 2em;
}

footer {
  padding: 2em;
}

#options {
  padding: 2em;
}


td:nth-child(2){
  background-color: #F9ABAF;
}

td:nth-child(7){
  background-color: #F9A779;
}

td:nth-child(9){
  background-color: #BCF9C0;
}

td:nth-child(10){
  background-color: #ADF992;
}

td img {
  width: 100%;
  height: auto;
}

JavaScript

var initialDamage = [100,250, 500, 1000, 2000, 3000, 4000, 5000, 6000, 7000,8000,9000,10000];
var aa = [0,5,7,9,12,14,17,20,26,32,40,49,57,67,78,90,105,121,133,146,161,177,194,213,227,244,263,281,300];


$(window).ready(function () {
    calcDamage();
});

function calcDamage() {
    $('#damageTable').empty();

    var monsterLevel = $('#monsterlevel').val();
    if (monsterLevel === undefined || isNaN(monsterLevel)) {
        monsterLevel = 68;
    } else if (monsterLevel > 80) {
        monsterLevel = 80;
    }
    var monsterAccuracy = 18;
    for(var i = 0; i < monsterLevel; i++){
      monsterAccuracy *= 1.045;
      console.log(monsterAccuracy)
    }

    var monsterDamage = 17.16117 * Math.exp(0.0495 * monsterLevel) - 13.1;
    console.log('monsterDamage ' , monsterDamage);
    $('#monsterdamageLevel').html(monsterLevel);
    $('#monsterdamage').html(Math.round(monsterDamage) );

    var initialDamageAdjusted = initialDamage.slice();

    for(var i=0; i < initialDamageAdjusted.length;i++){
      if(initialDamageAdjusted[i] > monsterDamage){
        var preArr = initialDamageAdjusted.slice().splice(0,i);
        var postArr = initialDamageAdjusted.slice().splice(i,initialDamageAdjusted.length-i,monsterDamage);
        console.log(preArr,monsterDamage,postArr);
        initialDamageAdjusted = preArr.concat([Math.round(monsterDamage)],postArr);
        console.log(initialDamageAdjusted);
        break;
      }
    }

    var evasion = Number($('#evasion').val());
    if (evasion === undefined || isNaN(evasion)) {
        evasion = 0;
    }

    var aaLevel = Number($('#aa').val());
    if(aaLevel === undefined || isNaN(aaLevel)){
      aaLevel = 0;
    }

    var minusdmg = Number($('#minusdmg').val());
    if(minusdmg === undefined || isNaN(minusdmg)){
      minusdmg = 0;
    }

    var acrobatics = 0;
    var acroChecked = false;
    if($('#acrobatics').prop('checked')){
      acrobatics = 0.3;
      acroChecked = true;
    }
   ...