JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="content">
        <h1>Let's Do Some Math</h1>
        <div id="intake">
            <input type="text" id="input"> <button id="inTakeButton">Push to Array</button> <button id="showArray">Show Array</button> <button id="doMath">Do Math</button>
        </div>
        <div id="middle">
            <ul id="list">
            </ul>
            <ul id="sortedList">
            </ul>
        </div>
        <div id="output">
            <p id="sorted"></p>
            <p id="sum"></p>
            <p id="average"></p>
        </div>
    </div>
</div>

CSS

#wrapper{
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 10px 3px black;
    padding: 10px;
}

h1 {
    text-align: center;
    color: orange;
    text-shadow: 1px 1px blue;
}

#intake {
    text-align: center;
}

JavaScript

myArray = [];
var theTotal;
$(document).ready(function() {
    $('#inTakeButton').on('click', function() {
        var inputValue = parseFloat($('#input').val());
        if (inputValue === "") {
            return;
        }
        if (isNaN(inputValue)) {
            $('#input').val("");
            return;
        }
        myArray.push(inputValue);
        $('#input').val("");
    });
    $('#showArray').on('click', function() {
        console.log(myArray);
        $('#list').html("");
        for (var i = 0; i < myArray.length; i++) {
            $('#list').append("<li>" + myArray[i] + "</ul>");
        };
        $('#doMath').on('click', function() {
            theTotal = 0;
			for (var i = 0; i < myArray.length; i++) {
              theTotal = theTotal + myArray[i];  
            };
            $('#sum').html("");
            $('#sum').html("The sum is: " + theTotal);
            var average = (theTotal/myArray.length);
            $('#average').html("");
            $('#average').html("The mean value is: " + average);
            var sorted = myArray.sort();
            $('#sorted').html("");
            for (var i = 0; i < myArray.length; i++) {
             $('#sorted').html("The sorted values are: <br>" + myArray[i] + ", ");   
            };
        });
    });
});