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; 
     ...

CSS

.complete {
	border: solid 1px green;
}

.rowA {
	background-color: #CCF3FF !important;
	height: 30px;
	text-align: center;
	font-size: 17px;
	color: green;
}

JavaScript

//Code Review 07-19-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore rows "B." & "C." as they are not the focus of this exercise.
//-Dynamically Add Input Count - Dixon, Alexander 2015
//Currently 53 lines down from 312. The "for" loop method was not utilized. Original found: https://jsfiddle.net/dixalex/d375u6Ln/
//Copyright: MIT License http://opensource.org/licenses/mit-license.php
$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");

var checkValid = setInterval( function() {
	$("input.rowA").each(function(i){
        var totals = [0,0,0,0];
        var total = 0;
		if($('input.complete').length == $('input.rowA').length)
		{
			$('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
			$("input.rowA").each(function(i){
				$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
				items = $('input.rowA:eq(' + i + ')').val();
				if(!items.match(/^\d+$/))
				{
					items = 0;
					$('.rowA').on("keypress change", function(evt) {
						$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
					});
				}
				items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
				totals.push(items);
			});
			total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
			$.each(totals,function() {
				total += this;
			});
			$('#customSum').text(total);
		} else {
			$('#topFour').html('');
			totals = [0,0,0,0];
			$("input.rowA").each(function(i){
				var items = $('input.rowA:eq(' + i + ')').val();
				if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
				{
					items = 0;
					$('.rowA').on("keypress change",...