JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable" width="100" cellpadding="3" border="1">
    <tr>
        <td>column1</td>
        <td>column2</td>
    </tr>
</table>

JavaScript

var array = ['abc','def','abc','xyz'];
var row;
var cell = [];
var rowClass = [];

for  ( var i = 0; i < array.length; i++)
{
    // Insert an empty <tr> element
    row = document.getElementById("myTable").insertRow(i+1);
    
    // Insert cells <td></td>
    for(var j = 0; j < 2; j++){
        cell[j] = row.insertCell(j);
    };
    
    // fill cells <td></td>
    cell[0].innerHTML = 'row ' + i;
    cell[1].innerHTML = array[i];
    cell[1].setAttribute("class", array[i]);
}
var k0 = 0;
rowClass[k0] = '.' + array[k0];
$(document).on('mouseover', rowClass[k0] ,function() {$(rowClass[k0]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k0] ,function() {$(rowClass[k0]).css("background-color", "");});

var k1 = 1;
rowClass[k1] = '.' + array[k1];	
$(document).on('mouseover', rowClass[k1] ,function() {$(rowClass[k1]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k1] ,function() {$(rowClass[k1]).css("background-color", "");});

var k2 = 2;
rowClass[k2] = '.' + array[k2];
$(document).on('mouseover', rowClass[k2] ,function() {$(rowClass[k2]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k2] ,function() {$(rowClass[k2]).css("background-color", "");});

var k3 = 3;
rowClass[k3] = '.' + array[k3];
$(document).on('mouseover', rowClass[k3] ,function() {$(rowClass[k3]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k3] ,function() {$(rowClass[k3]).css("background-color", "");});