JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow: hidden;"><div style="float: left">
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group2" data-group="group2">group2</div>
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group2" data-group="group2">group2</div>
<div class="gr group3" data-group="group3">group3</div>
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group3" data-group="group3">group3</div>
<div class="gr group2" data-group="group2">group2</div>
</div></div>

CSS

.clicked, .hovered{
    font-weight: bold;
}
.gr{
    cursor: pointer;
}

JavaScript

$(".gr").mouseover(function(){
    var group = $(this).data('group');
    $('.'+group).addClass('hovered');
});
$(".gr").mouseleave(function(){
    var group = $(this).data('group');
    $('.'+group).removeClass('hovered');
})
$(".gr").click(function(){
    var group = $(this).data('group');
    if($(this).hasClass('clicked')){
        $('.'+group).removeClass('clicked');
    }else{
        $('.'+group).addClass('clicked');
    }
})