JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
			<meta charset="utf-8"/>
			<link rel="shortcut icon" href="//#" />
	</head>
	<body>
    <div class = "center"> 
	<table id="fruitsTable" class="fruitsTableClass skillsTable class">
		<thead></thead>
		<tbody></tbody>
	</table>
    </div>  
    </body>
</html>

CSS

.class { 
		font-family: Open Sans; 
		}
		.center{
		display:flex;
		justify-content:center
		}
		.skillsTable th{
		border-left: 1px solid #AAA5A4;
		border-right: 1px solid #AAA5A4;
		}
		table{
		float: left;
		border-collapse: collapse;
		width:70%
		}
		td {
		border-left: 1px solid #AAA5A4;
		border-right: 1px solid #AAA5A4;
		padding-top: 8px;
		padding-left: 11px;
		font-size: 15px;
		}
		th {
		color: 	#0080ff;
		font-weight: normal;
		border-bottom: 1px solid #AAA5A4;
		padding-bottom: 5px;
		}

JavaScript

var obj = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);

var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);

var key3 = "Random Fruits";
obj[key3] = ['Soursop', 'Papaya', 'Pineapple','Melon'];
var myArray3 = [];
myArray3.push(obj);


function redraw(obj) {

var $header = $("<tr>"),
    cols = 0,
    bodyString = "";

$.each(obj, function(key, values) {
    cols = Math.max(cols, values.length); // find the longest
	$header.append($('<th/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) { // or use .map, but this is more undertandable for beginners
    bodyString += '<tr>';
    $.each(obj, function(key, values) {
        bodyString += '<td>' +
            (values[i] ? values[i] : "") + // ternary - instead of using if/else
            '</td>';
    });
    bodyString += '</tr>';
}
$('.fruitsTableClass thead').html($header);
$('.fruitsTableClass tbody').html(bodyString);
}


function listener(obj) {
    tbl = document.getElementById("fruitsTable");
        if (tbl != null) {
            for (var i = 0; i < tbl.rows.length; i++) {
              for (var j = 0; j < tbl.rows[i].cells.length; j++)
                     tbl.rows[i].cells[j].onclick = function () { 
                    getval(this);
                    obj[key2].push(this.innerHTML);
                    redraw(obj);
                    listener(obj);
               };
            }
        }
 }
function getval(cel) {
	alert(cel.innerHTML);
}
redraw(obj)
listener(obj);