JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <table>
      <tr>
        <td hover-content="apples">Apples</td>
        <td hover-content="oranges">Oranges</td>
      </tr>
      <tr>
        <td hover-content="limes">Limes</td>
        <td hover-content="blueberries">Blueberries</td>
      </tr>
    </table>
</div>

<div class="hide">
  <div id="apples">
    Hello there apples
  </div>
  <div id="oranges">
    Hello there oranges
  </div>
  <div id="limes">
    Hello there limes
  </div>
  <div id="blueberries">
    Hello there blueberries
  </div>
</div>

CSS

#parent > table {
  width: 200px;
  height: 100px;
}
#parent > table td {
  width: 50%;
  text-align: center;
  border: 2px solid red;
}
.hide > div {
  display: none;
}

JavaScript

$(document).ready(function() {
	$("#parent td").hover(function() {
  	// Get attribute
  	var hoverContent = $(this).attr("hover-content");
    console.log(hoverContent);
    // Hide others, remove this for different style of animation
    $(".hide > div").hide();
    // Slide open
    $("#" + hoverContent).slideToggle();
  })
})