JSFiddle - React, Tailwind, and code Playground

HTML

<table id="atcOn" style="border-spacing: 20px 10px;">
    <tr>
        <td class='ATConline' onmouseover='displayData(0)' onmouseout='hideData(0)'>
            <ul>
                <li>LCCC_CTR</li>
                <li id='0'></li>
                <li>126.300 Mhz</li>
            </ul>
        </td>
        <td>LLBG_APP</td>
        <td>LLBG_DEL</td>
    </tr>
    <tr>
        <td>LLBG_E_GND</td>
        <td>LLBG_TWR</td>
        <td>LLBG_W_GND</td>
    </tr>
    <tr>
        <td>LLLL_CTR</td>
        <td>LLLL_FSS</td>
        <td>LLSD_TWR</td>
    </tr>
    <tr></tr>
</table>

JavaScript

var imgURL = "'https://www.ivao.aero/data/images/ratings/atc/";
var data = ["x"];
var lastData = ["x"];

// This is created using a PHP for loop of all data.
data[0] = "Amr Magdy (430603) <br/><img src=" + imgURL + "5.gif'>";
data[1] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[2] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[3] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[4] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[5] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[6] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[7] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[8] = " (0) <br/><img src=" + imgURL + ".gif'>";

function displayData(id) {
    lastData[id] = document.getElementById(id).innerHTML;
    document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + data[id];
}

function hideData(id) {
    document.getElementById(id).innerHTML = lastData[id];
}