JSFiddle - React, Tailwind, and code Playground

HTML

<div id=boxes>
    <div id=box1>box1</div>  
    <div id=box2>box2</div>  
    <div id=box3>box3</div>  
        </div>

CSS

#boxes{
    width:200px;
    height:350px;
}
#box1{
    width:40px;
    height:35px;
    background-color:red;
}
#box2{
    width:40px;
    height:35px;
    background-color:yellow;
}
#box3{
    width:40px;
    height:35px;
    background-color:blue;
}

JavaScript

jQuery('#boxes').bind('click', function() {
   
    var currentID = jQuery(this).children("id");
   
    alert(currentID);
    
    jQuery(currentID).delegate("a", "hover", function(event){

        var $img = jQuery(this).parent("li").find('img');
        var image = jQuery(this).attr('data-img');
         jQuery('.defaultimg').stop(true, true).fadeOut();
        if( event.type === 'mouseenter' ) {
         
            if($img.length){
                $img.show();
               
            }else{
                jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }
            
        }else{
            if($img){
              $img.hide();  
            }
             jQuery('.defaultimg').stop(true, true).fadeIn();
        }
    }); 
});