JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div class="rrQuestionContainer">
    <hr>
    <div style="border:1px solid #888; 
     background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;">
        <center> <span class="mrQuestionText" style=""><b>Staff Information (for all office
        locations)</b></span>

        </center>
    </div><span class="mrQuestionText" style=""><br>
    <br>
    17. A. Indicate the TOTAL number of full time staff your firm has in the following
    positions. DO NOT count a staff member in more than one position. (numeric values
    only, no need for thousands separator)</span>

    <table summary="&lt;hr/&gt;&lt;div style='border:1px solid #888; 
     background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'&gt;&lt;center&gt;&lt;b&gt;Staff Information (for all office locations)&lt;/b&gt;&lt;/center&gt;&lt;/div&gt;&lt;br/&gt;&lt;br/&gt;17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)&lt;span class='sumcol'&gt;&lt;/span&gt;" class="mrQuestionTable" style="display: inline-block;">
        <tbody>
            <tr>
                <td id="Cell.0.0"></td>
                <td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0 
           auto; display:block; text-align:center;
          width:280px;">&nbsp;</span></span>
                </td>
            </tr>
            <tr>
                <td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
     ...

JavaScript

//Code Review 07-15-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore row "C." it works in the environment it is supposed to.
//-Dynamically Add Input Count - Dixon, Alexander 2015
			$('#_Q33_Q0_Q0').keyup(function() {		//-Q17A Custom Totals
				$("#_Q33_Q0_Q0").each(function(){
					var rowOne = parseInt($(this).val(), 10);
					var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
					var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
					var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
					var oneCheck = $(this).val().length;
					var twoCheck = $('#_Q33_Q1_Q0').val().length;					
					var threeCheck = $('#_Q33_Q2_Q0').val().length;
					var fourCheck = $('#_Q33_Q3_Q0').val().length;
					if(oneCheck < 1 || isNaN(rowOne))
					{
						rowOne = "0";
						$('#customSum').css("color", "red");
					}
					if(twoCheck < 1 || isNaN(rowTwo))
					{
						rowTwo = "0";
						$('#customSum').css("color", "red");
					}
					if(threeCheck < 1 || isNaN(rowThree))
					{
						rowThree = "0";
						$('#customSum').css("color", "red");
					}
					if(fourCheck < 1 || isNaN(rowFour))
					{
						rowFour = "0";
						$('#customSum').css("color", "red");
					}
					var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
					if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
					{
						$('#customSum').css("background-color", "#e5f2fb");
						$('#customSum').css("color", "green");
						$('#customSum').text(sumOne);
						$('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
						$('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
						$('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
						$('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
						if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
						{
							if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 ||...