JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box" id="box-1">bx1</div>
    <div class="box" id="box-2">bx2</div>
    <div class="box" id="box-3">bx3</div>
    <div class="box" id="box-4">bx4</div>
    <div class="box" id="box-5">bx5</div>
</div>

CSS

.box{
		display: inline-block;
		height: 50px;
		width: 50px;
		background-color: #000;
		color: #fff;
		-webkit-transition: .9s 0s;
        text-align:center;
	}

#box-1:hover, #box-1.hovered {background-color: #C8F608;}
#box-2:hover, #box-2.hovered {background-color: #23DC07;}
#box-3:hover, #box-3.hovered {background-color: #07D7D7;}
#box-4:hover, #box-4.hovered {background-color: #076BD7;}
#box-5:hover, #box-5.hovered {background-color: #1307D7;}

JavaScript

$('#box-1').mouseover(function() {
    $(this).addClass('hovered');
    $('#box-2').addClass('hovered');
});
$('.container').mouseleave(function() {
    $(this).find('.hovered').removeClass('hovered');
});