JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainDiv">Hover here
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</div>

<div id="secDiv">Hover here
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</div>

JavaScript

$(document).ready(function(){
  $("#mainDiv").hover(function(){
    if($("#div1").css("display") == "none"){
       $("#div1").fadeIn(2000);
    }else{
       $("#div1").fadeOut(2000);
    }
  });
});

$(document).ready(function(){
  $("#secDiv").hover(function(){
    if($("#div1").css("display") == "none"){
       $("#div1").fadeIn(2000);
    }else{
       $("#div1").fadeOut(2000);
    }
  });
});