JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="productlist">
    <li><a href="#" id="link0" class="product-link">Caviar</a></li>
    <li><a href="#" id="link1" class="product-link">Athena</a></li>
    <li><a href="#" id="link2" class="product-link">Knot</a></li>
    <li><a href="#" id="link3" class="product-link">Brooke Leaf</a></li>
</ul>

<div id="boxlink0" class="boxlink">Some text for the first link</div>
<div id="boxlink1" class="boxlink">Some text for the second link</div>
<div id="boxlink2" class="boxlink">Some text for the third link</div>
<div id="boxlink3" class="boxlink">Some text for the fourth link</div>

CSS

.boxlink {
    display: none;
}
#boxlink0 {
    display: block;
}

JavaScript

var $boxes = $('.boxlink'),
$productLinks = $('.productlist .product-link').mouseover(function() {
    $boxes.hide().filter('#box' + this.id).show();
});