JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<ul id="items">
  <li PK1="1" PK2="abc">value1</li>
  <li PK1="2" PK2="abc">value2</li>
  <li PK1="3" PK2="def(1)">value3</li>
  <li PK1="4" PK2="def(1)">value4</li>
</ul>

<ul id="types">
  <li PK="abc">abc</li>
  <li PK="def(1)">def</li>
</ul>

CSS

.Highlight
{
    background-color: yellow;
    
}

JavaScript

var sCrit= '';
$('ul#items li').hover(function(){
  sCrit = '[pk="' + $(this).attr('pk2') + '"]';     
  $('ul#types li' + sCrit).addClass('Highlight');
});

$('ul#items li').mouseleave(function(){
  $('ul#types li' + sCrit).removeClass('Highlight');
});