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 index = 1; index<= 5; index++){
    document.getElementById("info" + index).onmouseover = (function(index) {
        return function() {
            document.getElementById ("table" + index + "1").style.display = "none"; 
            document.getElementById ("table" + index + "2").style.display = "block";    
        }
    })(index);

    document.getElementById("info" + index).onmouseout = (function(index) {
        return function() {
            document.getElementById ("table"+ index +"1").style.display = "block";
            document.getElementById ("table"+ index +"2").style.display = "none";   
        }
    })(index);
}