JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="name" placeholder="Name">
<input type="text" id="score" placeholder="Score">
<br>
<br>
<button id="push">Push to Array</button>
<button id="show">Show</button>
<button id="doMath">Do Math</button>
<ul id="list"></ul>
<p id="sum"></p>
<p id="mean"></p>

CSS

input:hover {
    border: 1px solid black;
}

JavaScript

var myArray = [];
var sumOfScores;
var mean;
$(document).ready(function () {
    $('#push').on('click', function () {
        var name = $('#name').val();
        var score = parseInt($('#score').val());
        myArray.push((student = {
            name: name,
            score: score,
            newScore: null
        }));
        console.log(student);
        $('#name').val("");
        $('#score').val("");
    });
    $('#show').on('click', function () {
        $('#list').html("");
        for (i = 0; i < myArray.length; i++) {
            $('#list').append("<li>" + myArray[i].name + " received a score of " + myArray[i].score + "</li>");
        };
    });
    $('#doMath').on('click', function(){
    	sumOfScores = 0;
        for (i = 0; i < myArray.length; i++) {
            sumOfScores += myArray[i].score;
        };
        $('#sum').html("The sum is: " + sumOfScores);
        mean = (sumOfScores / myArray.length);
        $('#mean').html("The mean score is: " + mean);
    });
});