JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th>Input 1</th>
        <th>Input 2</th>
        <th>Input 3</th>
        <th>Input 4</th>
        <th>Total</th>
        <th>Average</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>
            <input id="input1" class="input" type="number" value="0" name="input1">
        </td>
        <td>
            <input id="input2" class="input" type="number" value="0" name="input2">
        </td>
        <td>
            <input id="input3" class="input" type="number" value="0" name="input3" />
        </td>
        <td>
            <input id="input4" class="input" type="number" value="0" name="input4">
        </td>
        <td id="total"></td>
        <td id="ave"></td>
        <td id="grade"></td>
    </tr>
</table>
<div id="error"></div>

CSS

input {
    max-width: 50px;
}
table td {
    padding: 0 10px;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}
.red {
    background: blue;
}
#error {
    display: hidden;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

JavaScript

// Store all the inputs in a variable, so we could use $.each
var $inputs = $('.input'),
    gradeColors = {
        'A': 'blue',
            'B': 'green',
            'C': 'yellow',
            'D': 'red',
            'E': ''
    };

size = function (obj) {
    var size = 0,
        key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

function checkGrade(average) {

    var grade = '--';

    if (average >= 80) {
        grade = 'A';
    } else if (80 > average && average >= 60) {
        grade = 'B';
    } else if (60 > average && average >= 40) {
        grade = 'C';
    } else if (40 > average && average >= 20) {
        grade = 'D';
    } else if (20 > average && average >= 0) {
        grade = 'E';
    }

    return grade;
}

function evaluate() {
    console.log('asd');
    var number = null,
        total = 0,
        average = 0,
        gradeMessage = '',
        // Values from the input fields for saving.
        values = {}
    text = '--';

    // Remove previous error.
    $('#error').hide();

    $inputs.each(function (key, value) {
        number = $(value).val();
        number = parseInt(number, 10);

        // Store the value.
        if (isNaN(number)) {

            // Break the loop and show the error.
            $('#error').text('Inputs must be numbers').show();
            return false;
        } else {
            values['input' + key] = parseInt(number, 10);
            total += values['input' + key];
        }
    });

    if (size(values) === 4) {

        // Calculate average.
        average = total / 4;
        grade = checkGrade(average);
        gradeMessage = $('<div></div>').text(grade);

        if (gradeColors[grade]) {
            gradeMessage.addClass(gradeColors[grade]);
        }

        // Update the grade.
        $('#grade').empty().html(gradeMessage);
        $('#total').text(total);
        $('#ave').text(average);
    }

};

$inputs.on('change', evaluate);