JSFiddle - React, Tailwind, and code Playground

HTML

<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

CSS

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

JavaScript

$('a.hover').mouseover(function() {

    var dataI = $(this).attr('data-i');
    
    dataI = dataI.replace('+', '\\+');

	$('div#div-' + dataI).addClass('h');
});

$('a.hover').mouseout(function() {

    var dataI = $(this).attr('data-i');

    dataI = dataI.replace('+', '\\+');

	$('div#div-' + dataI).removeClass('h');
});