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 id="live-step2" style="width:50px;height:50px;background-color:#ffffff">step2
    </div>
    <div id="live-step3" style="width:50px;height:50px;background-color:#ffffff">step2
    </div>
    <div id="live-step4" style="width:50px;height:50px;background-color:#ffffff">step4
    </div>
</div>

JavaScript

$("#live").mouseover(function () {

  fadeloop('#live-step1', 100, 200, true);
  fadeloop('#live-step2', 100, 200, true)
  fadeloop('#live-step3', 100, 200, true);
  fadeloop('#live-step4', 100, 200, true);
});

$("#liveMusic").mouseout(function () {
  fadeloop('#live-step1', 100, 200, false);
  fadeloop('#live-step2', 100, 200, false);
  fadeloop('#live-step3', 100, 200, false);
  fadeloop('#live-step4', 100, 200, false);
});

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