JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="productlist">
  <li><a href="#" id="0" class="product-link">Link 1</a></li>
  <li><a href="#" id="1" class="product-link">Link 2</a></li>
  <li><a href="#" id="2" class="product-link">Link 3</a></li>
</ul>

<div class="panel-overview boxlink" id="boxlink0"> Something goes here 1 </div>
<div class="panel-overview boxlink" id="boxlink1"> Something goes here 2 </div>
<div class="panel-overview boxlink" id="boxlink2"> Something goes here 3 </div>

CSS

.panel-overview {
    display:none;
}

JavaScript

var current_box = 0; // Saves current shown box for timer
var timer_break = false; // Determines if timer shows boxes or not

// Function hides all boxes
function hide_boxes() {
    $('.boxlink').hide();
}

// Function shows box wit box_id and hides all other boxes
function show_box(box_id) { 
    hide_boxes();
    $('#boxlink'+box_id).show();
}

$(document).ready(function () {
    // Bind show_box to HOVER Event
    $('.product-link').mouseover(function () {
        timer_break = true;
        show_box($(this).attr('id'));
    });
    // Bind hide_box to MOUSEOUT Event
    $('.product-link').mouseout(function () {
        timer_break = false;
        hide_boxes();
    });
    // Initiate Timer 
    var show_timer = setInterval(function () {
        if(!timer_break) {
            if(current_box < 2) {
                current_box++;
            } else {
                current_box = 0;
            }
            show_box(current_box);
        } 
    },3000);
    // Show first Box after loading
    show_box(current_box);
});