JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div id="students">...</div>

CSS

table { 
    border-collapse: collapse; 
    font: 12px Verdana;
}

table,
td { 
    border: 1px solid #F1F1F1;
    padding: 5px;
}

th {
    background: #F1F1F1;
}

JavaScript

$(document).ready(function() {
    /* build the HTML */
	function build() {
		var students = new Array();
        students.push({ order: 1, id: 1, name: "Student 1", room_id: 5, age: 29, group: 1 });
		students.push({ order: 2, id: 2, name: "Student 2", room_id: 5, age: 22, group: 1 });
		students.push({ order: 3, id: 3, name: "Student 3", room_id: 5, age: 21, group: 3 });
		students.push({ order: 4, id: 4, name: "Student 4", room_id: 5, age: 25, group: 3 });
		students.push({ order: 5, id: 5, name: "Student 5", room_id: 3, age: 23, group: 2 });
		students.push({ order: 6, id: 6, name: "Student 6", room_id: 3, age: 27, group: 2 });

		/* sort students by room_id */
		students.sort(function(a, b) {
			return ((a.room_id < b.room_id) ? -1 : ((a.room_id > b.room_id) ? 1 : 0));
		});

		var html = '<table>';
		html += '<tr><th>Id</th><th>Name</th><th>Age</th><th>Room</th><th>Group</th><th>Actions</th></tr>';
        
		for (var i = 0; i < students.length; i++) {
			html += '<tr>';
            html += 	'<td>'+ students[i].id +'</td>';
			html += 	'<td>'+ students[i].name +'</td>';
			html += 	'<td>'+ students[i].age +'</td>';
			html += 	'<td>'+ students[i].room_id +'</td>';
			html += 	'<td>'+ students[i].group +'</td>';
			html += 	'<td class="order-col" data-order="'+ students[i].order +'"><a href="#" class="move_up">UP</a> | <a href="#" class="move_down">DOWN</a></td>';
            
            html += '</tr>';
		}
		html += '</table>';

        $("#students").html(html);
	}
	
    /* move group up */
    $(".move_up").live("click", function() {
       
        var currentRow =  $(this).parent().parent();
        var currentCol =  $(this).parent();
        var currentOrder =  $(currentCol).data("order");

        if (currentOrder != "1"){

            var prevRow = $(currentCol).parent().prev(); // (td), tr, previous tr
            var prevCol =  $(prevRow).find( ".order-col");
            var prevOrder = $(prevCol).data("order");
                                  ...