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="wrapper">
<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>
 <div>

CSS

#wrapper div
{
    display:none;
}
#wrapper div:first-child
{
    display:block;
}

JavaScript

$('ul li a').hover(function(e){
    var liNumber=$(this).parent('li').index();
    $('#wrapper div').css('display','none');
    $('#wrapper div:nth-child('+(liNumber+1)+')').show();
})