JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="edit">CLICK ME</a>

<div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
<div>

CSS

.row{
    width:510px;
    height:100px;
    margin-top:50px;
    background-color:red;    
}

.box{
    float:left;
    width:100px;
    height:100px;
    background-color:yellow;    
    border:1px solid black;
}

JavaScript

$('.edit').click(function(){
										
    $('.row').children().remove();
	$('.row').append('<div class="box"></div>');
    
});


	
$('.box').on('mouseenter', function(){ 
												
    alert('hello');  
		  
    }
	
);

$('.box').on('mouseleave', function(){ 
												
	alert('goodbye');    
		 
    }
	
);