JSFiddle - React, Tailwind, and code Playground

HTML

<font id='info1' style='background: red;'>info</font>
<table width='100%' id='table11' style='display: block; margin-bottom: 10px;' height='100%'>
    <tr>
        <td>Hello</td>
    </tr>
</table>
<table width='100%' id='table12' style='display: none; margin-bottom: 10px;' height='100%'>
    <tr>
        <td>Hello1</td>
    </tr>
</table>
<font id='info2' style='background: red;'>info</font>
<table width='100%' id='table21' style='display: block; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello</td>
</tr></table>
<table width='100%' id='table22' style='display: none; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello1</td>
</tr></table>
<font id='info3' style='background: red;'>info</font>
<table width='100%' id='table31' style='display: block; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello</td>
</tr></table>
<table width='100%' id='table32' style='display: none; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello1</td>
</tr></table>
<font id='info4' style='background: red;'>info</font>
<table width='100%' id='table41' style='display: block; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello</td>
</tr></table>
<table width='100%' id='table42' style='display: none; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello1</td>
</tr></table>
<font id='info5' style='background: red;'>info</font>
<table width='100%' id='table51' style='display: block; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello</td>
</tr></table>
<table width='100%' id='table52' style='display: none; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello1</td>
</tr></table>
<font id='info6' style='background: red;'>info</font>
<table width='100%' id='table61' style='display: block; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello</td>
</tr></table>
<table width='100%' id='table62' style='display: none; margin-bottom: 10px;' height='100%'><tr>
    <td>Hello1</td>
</tr></table>

JavaScript

for (var i = 1; i <= 6; ++i) {
    document.getElementById('info' + i).addEventListener('mouseover', (function(j) {
      return function() {
        document.getElementById('table' + j + "1").style.display = 'none';
        document.getElementById("table" + j + "2").style.display = "block";
      }
    }(i)));
    document.getElementById("info" + i).onmouseout = (function(j) {
        return function() {
            document.getElementById("table" + j + "1").style.display = "block";
            document.getElementById("table" + j + "2").style.display = "none";
        }
    })(i);
}