JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<span class="zone dynamicClass1 clickable">Text1</span>
<span class="zone dynamicClass6-2 clickable">Text2</span>

<div class="box dynamicClass6-2">dasdasdasdasdasd text1</div>
<div class="box dynamicClass1">asdasdasdasdas text2</div>

CSS

.hovered {border: 1px solid red;}

JavaScript

$(document).on("mouseenter",".zone",function(){
    var classes = $(this).attr("class").split(" ");
    
    $("div." + classes[1]).addClass("hovered");
}).on("mouseleave",".zone",function(){
    var classes = $(this).attr("class").split(" ");
    $("div." + classes[1]).removeClass("hovered");
});