JSFiddle - React, Tailwind, and code Playground

by gizmovation

HTML

<div class="image_map">
  <a class="cancun" id="cancunPin" href="#">Cancun</a>
  <a class="cozumel" id="cozumelPin" href="#">Cozumel</a>
</div>
<hr>
<div class="destinations">
  <ul>
    <li class="destination"><a class="cancun" href="#">Cancun</a></li> 
    <li class="destination"><a class="cozumel" href="#">Cozumel</a></li>
  </ul>
</div>

CSS

.selected {
    border: 1px solid #c0c0c0;
    text-decoration: none;
}

JavaScript

$(document).ready(function () {
    
    $('.destinations a').hover(function () {
        // on hover
        $('.image_map').find('#' + $(this).attr('class') + 'Pin').addClass('selected');
        console.log($('#' + $(this).attr('class') + 'Pin'));
    }, function () {
        // on exit
        $('.image_map').find('#' + $(this).attr('class') + 'Pin').removeClass('selected');
    });
});