JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">Click This Div</div>
<div id="second">Mouse Over this div after clickin</div>

CSS

#first{width:100px;height:100px;cursor:pointer;background:red;text-align:center;}
#second{width:100px;height:100px;background:blue;color:#fff;text-align.center;margin-top:10px;}

JavaScript

/*var control = "";
$("#first").on("click",function(){
    control = true;
    alert("cilcked | doSomething Here");
});

$("#second").on("mouseover",function(){
    if(control==true){
        alert("mouseovered | doSomething Here");
        //if you want again click and after mouseover evenet
        //you have to put here
        //control="";
    }
});
*/
var control = "";
var first  = document.getElementById("first");
var second = document.getElementById("second");

first.onclick = function(){
    control = true;
    alert("clicked | doSomething Here");
}
second.onmouseover = function(){
    if(control==true){
        alert("mouseovered after click | doSomething Here");
        //if you want again click and after mouseover evenet
        //you have to put here
        //control=""; 
    }
}