JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:550px;width:550px;">
    <div id="live" style="width:50px;height:50px;;background-color:gray">hover
    </div>
    <div id="live-step1" style="width:50px;height:50px;background-color:#ffffff">step1
    </div>
    
</div>

JavaScript

$("#live").mouseover(function() {
  fadeloop('#live-step1', 100, 200, true);
});

$("#live").mouseout(function() {
  fadeloop('#live-step1', 100, 200, false);
});
var intId;
function fadeloop(el, timeout, timein, loop) {

  var $el = $(el),
     fn = function() {
      $el.fadeOut(timeout).fadeIn(timein);
    };
  
  if (loop) {
    intId = setInterval(fn, timeout + timein + 100);
    
  } else {
    clearInterval(intId);
  }
  return false;
}