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">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>

CSS

#boxlink1, #boxlink2, #boxlink3 {
    display:none
}

JavaScript

$('#link0').hover(function(){
    $('#boxlink0').css('display','block');
    $('#boxlink1, #boxlink2, #boxlink3').css('display','none');
});

$('#link1').hover(function(){
    $('#boxlink1').css('display','block');
    $('#boxlink0, #boxlink2, #boxlink3').css('display','none');
});

$('#link2').hover(function(){
    $('#boxlink2').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink3').css('display','none');
});

$('#link3').hover(function(){
    $('#boxlink3').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink2').css('display','none');
});