JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Prototype_Student</title>
       <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <link rel="stylesheet" href="../css/student_style.css"/>
    </head>
    <body>
        <div id ="containter">
            <div class="inputs">
                <span class="blocks">Name:</span><input type="text" class="inputFields" size="35" id="name"/><br><br>
                <span class="blocks">Age:</span><input class="inputFields" size="35" id="age"/><br><br>
                <span class="blocks">Department:</span><input class="inputFields" size="35" id="department"/><br><br>
                <div id="error"></div>

            </div>
            <div class="buttons">
                <button id="addStudent" class="btn btn-success" onclick="validate(event)">Add Student</button>
                <button id="addTeacher" class="btn btn-primary" onclick="validate(event)">Add Teacher</button>
            </div>
        </div>
        <div id="studentList"><h2> Student List</h2></div>        
        <div id="teacherList"><h2> Teacher List</h2></div>

CSS

html{
    margin-top: 5em;
}

#containter{
    float:left;
    border: 2px solid;
    box-shadow: 10px 10px 5px #888888;
    border-radius:5px;
    margin: 10px;
}
.inputFields{
    margin-right: 5em;
    float:right;
}

.inputs{
    margin:2em;
}

.userListUnit{
    vertical-align: middle;
    border: 1px solid;
    text-align: center;
    line-height: 30px;  
    box-shadow: 5px 5px 5px #888888;
    margin-bottom: 2em;
}

#studentList{
    float: left;
    margin-left: 10em;
}
#teacherList{
    float: left;
    margin-left: 15em;
}

.blocks{
    padding: 1em;
}

#addStudent,#addTeacher{
    margin: 0 auto;
    padding: 1em;
}

.buttons{
    margin-left: 28%;
    margin-bottom: 1em;
}

JavaScript

var nameInput = document.getElementById('name'),
        ageInput = document.getElementById('age'),
        departmentInput = document.getElementById('department'),
        errorInput = document.getElementById("error"),
        charFilter = /^[a-zA-Z ]*$/,
        numberFilter = /^[0-9]*$/;

function SchoolAdmission(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

SchoolAdmission.prototype.display = function(nameButton) {
    var print = document.createElement("p");
    print.className = "userListUnit";
    print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department;
    if (nameButton === "addStudent") {
        document.getElementById('studentList').appendChild(print);
    }
    else {
        document.getElementById('teacherList').appendChild(print);
    }
    clearFields();
};

clearFields = function clearFields() {
    nameInput.value = "";
    ageInput.value = "";
    departmentInput.value = "";
};

addMember = function addMember(e) {
    var s1 = new SchoolAdmission();
    s1.name = nameInput.value;
    s1.age = ageInput.value;
    s1.department = departmentInput.value;
    s1.display(e.target.id);
};

validate = function validate(e) {
    var validation = true;
    if (nameInput.value == "" || departmentInput.value == "" || ageInput.value == "") {
        (errorInput).innerHTML = "Please fill all columns";
        validation = false;
    }
    else if (!nameInput.value.match(charFilter)) {
        (errorInput).innerHTML = "Please enter only alphabets for Name and Department";
        validation = false;
    }

    else if (!ageInput.value.match(numberFilter)) {
        (errorInput).innerHTML = "Please enter only numbers for Age";
        validation = false;
    }
    else if (!departmentInput.value.match(charFilter)) {
        (errorInput).innerHTML = "Please enter only alphabets for Name and Department";
        validation = false;
    }

    if (validation) {
      ...