JSFiddle - React, Tailwind, and code Playground

by Dan Pasca

CSS

body {
    background: rgb(128, 159, 194);
}

.school {
    background: white;
    height: auto;
    width: 60%;
    min-width: 520px;
    margin: 10px auto 5px auto;
    padding: 5px;
    border-radius: 5px;
}

.nume, .medie {
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
}

span {
    font-family: arial;
    font-weight: bold;
    padding-left: 20px;
    cursor: pointer;
}

.ascorder, .dscorder {
    background-image: url('http://wikitravel.org/upload/shared/1/1c/Red_Arrow_Down.png');
    background-repeat: no-repeat;
}

.dscorder {
    background-image: url('http://assets.viewthespace.com/emails/change-up-green.png');
}

.nume {
    background: rgb(107, 63, 6);
    color: white;
    padding-left: 5px;
}

ul {
    background: rgb(231, 231, 231);
    border-radius: 5px;
      
}

li:first-child {
    border: 0;
    width: 160px;
    text-align: left;
}

li:last-child {
    border 0;
}

li {
    display: inline-block;
    padding: 0 5px 0 5px;
    border-right: 1px dashed black;
    font-family: arial;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    min-width: 85px;
}

JavaScript

console.clear();

$(document).ready(function () {

    function Student(id, firstName, lastName, gradesArray) {
        this.id = id;
        this.firstName = firstName;
        this.lastName = lastName;
        this.gradesArray = gradesArray;
    }

    Student.prototype = {
        calculateAverage: function () {
            var gradesSum = 0;

            for (var i = 0; i < this.gradesArray.length; i++) {
                gradesSum += this.gradesArray[i].classMark;
            }

            return gradesSum / this.gradesArray.length;
        },

        getClassMark: function (className) {
            for (var i = 0; i < this.gradesArray.length; i++) {
                if (this.gradesArray[i].className === className) {
                    return this.gradesArray[i].classMark;
                }
            }
            return -1;
        },
        
        setClassMark: function (className,classMark) {
            for (var i = 0; i < this.gradesArray.length; i++) {
                if (this.gradesArray[i].className === className) {
                    this.gradesArray[i].classMark = classMark;
                }
            }
        },

        display: function () {
            /*var returnArray = [];
            var message = "<ul>";
            
            message += "<li id=" + this.id +">" + this.firstName + " " + this.lastName + "</li>";

            for (var i = 0; i < this.gradesArray.length; i++) {
                message += "<li>" + this.gradesArray[i].className + ": " + "<input data-id=" + this.gradesArray[i].className + " id=medieelev type=text size=1 value=" + this.gradesArray[i].classMark + " />" + "</li>";
            }

            message += "</ul>";
            */
            return this;
        }
    }

    function School(schoolId,schoolName) {
        this.studentList = [];
        this.schoolName = schoolName;
        this.schoolId = schoolId;
    }

    School.prototype = {
        calculateAverage: function () {
            var...