JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<form id="form1" name="form1" method="post">
  <table width="856" border="1">
    <tr>
    <td width="100"><div align="center"><strong>Eastern Time</strong></div></td>
    <td width="100"><div align="center"><strong>Mountain Time</strong></div></td>
    <td width="164"><div align="center"><strong>Connects</strong></div></td>
    <td width="164"><div align="center"><strong>Aborts</strong></div></td>
    <td width="164"><div align="center"><strong>Overall Abort %</strong></div></td>
    <td width="164"><div align="center"><strong>Abort by Hr %</strong></div></td>
  </tr>
  <tr>
    <td>8am-9am</td>
    <td>6am-7am</td>
    <td><input type="text" id="cnt1"></td>
    <td><input type="text" id="abt1" onKeyUp="Calculate_Value(); changeColor();"></td>
    <td><input type="text" id="answera" readonly></td>
    <td><input type="text" id="answerb" readonly></td>
  </tr>
  <tr>
    <td>9am-10am</td>
    <td>7am-8am</td>
    <td><input type="text" id="cnt2"></td>
    <td><input type="text" id="abt2" onKeyUp="Calculate_Value(); changeColor();"></td>
    <td><input type="text" id="answera2" readonly></td>
    <td><input type="text" id="answerb2" readonly></td>
  </tr>
  <tr>
    <td>10am-11am</td>
    <td>8am-9am</td>
    <td><input type="text" id="cnt3"></td>
    <td><input type="text" id="abt3" onKeyUp="Calculate_Value(); changeColor();"></td>
    <td><input type="text" id="answera3" readonly></td>
    <td><input type="text" id="answerb3" readonly></td>
  </tr>
  <tr>
    <td>11am-12pm</td>
    <td>9am-10am</td>
    <td><input type="text" id="cnt4"></td>
    <td><input type="text" id="abt4" onKeyUp="Calculate_Value(); changeColor();"></td>
    <td><input type="text" id="answera4" readonly></td>
    <td><input type="text" id="answerb4" readonly></td>
  </tr>
  <tr>
    <td>12pm-1pm</td>
    <td>10am-11am</td>
    <td><input type="text" id="cnt5"></td>
    <td><input type="text" id="abt5" onKeyUp="Calculate_Value(); changeColor();"></td>
    <td><input type="text"...

JavaScript

function Calculate_Value()
{
var cnt1 = document.getElementById("cnt1").value;
var abt1 = document.getElementById("abt1").value;
var a1 = parseInt(cnt1) + parseInt(abt1) || 0;
var b1 = parseInt(abt1) || 0;
var c1 = parseInt(a1) || 0;
var ovr1 = ((parseInt(abt1)/parseInt(a1)*100).toFixed(2)) + ("%");
var abh1 = ((parseInt(abt1)/parseInt(c1)*100 || 0).toFixed(2)) + ("%");

if (ovr1 === NaN + ("%")){
	write = "";
}
else if (ovr1 === Infinity + ("%")){
	write = "";
}
else
{
Textbox1=document.getElementById("answera");
Textbox1.value=ovr1;
Textbox2=document.getElementById("answerb");
Textbox2.value=abh1;
}

var cnt2 = document.getElementById("cnt2").value;
var abt2 = document.getElementById("abt2").value;
var a2 = parseInt(cnt2) + parseInt(abt2) || 0;
var b2 = parseInt(abt2) - parseInt(b1) || 0;
var c2 = parseInt(a2) - parseInt(a1) || 0;
var ovr2 = ((parseInt(abt2) / parseInt(a2)*100).toFixed(2)) + ("%");
var abh2 = ((parseInt(b2) / parseInt(c2)*100 || 0).toFixed(2)) + ("%");

if (ovr2 === NaN + ("%")){
	write = "";
}
else if (ovr2 === Infinity + ("%")){
	write = "";
}
else
{
Textbox3=document.getElementById("answera2");
Textbox3.value=ovr2;
Textbox4=document.getElementById("answerb2");
Textbox4.value=abh2;
}

var cnt3 = document.getElementById("cnt3").value;
var abt3 = document.getElementById("abt3").value;
var a3 = parseInt(cnt3) + parseInt(abt3) || 0;
var b3 = parseInt(abt3) - parseInt(b2) - parseInt(b1) || 0;
var c3 = parseInt(a3) - parseInt(a2) || 0;
var ovr3 = ((parseInt(abt3) / parseInt(a3)*100).toFixed(2)) + ("%");
var abh3 = ((parseInt(b3) / parseInt(c3)*100 || 0).toFixed(2)) + ("%");

if (ovr3 === NaN + ("%")){
	write = "";
}
else if (ovr3 === Infinity + ("%")){
	write = "";
}
else
{
Textbox5=document.getElementById("answera3");
Textbox5.value=ovr3;
Textbox6=document.getElementById("answerb3");
Textbox6.value=abh3;
}

var cnt4 = document.getElementById("cnt4").value;
var abt4 = document.getElementById("abt4").value;
var a4 = parseInt(cnt4) + parseInt(abt4)...