JSFiddle - React, Tailwind, and code Playground

HTML

<a id="category1" class="category" href="#">Category 1</a>
<div id="submenu1" class="submenu">

  <div>
    <b>Column 1</b>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
  
  <div>
    <b>Column 2</b>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
  
</div>

<a id="category2" class="category" href="#">Category 2</a>
<div id="submenu2" class="submenu">Submenu #2
  <div>
    <b>Column 1</b>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
  
  <div>
    <b>Column 2</b>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
    
  </div>

</div>

JavaScript

$(document).ready(function(){
  
  $(".category, .submenu").mouseenter(function(){
    
    var i = 0;
    var id = $(this).attr('id'); /*-- $(obj).attr("id"); */
    console.log('The id your mouse entered: ' + id);
    if (id == "#category1") {i = 1};
  
    $("#submenu" + i).toggleClass("submenuHover");
    $("#category" + i).toggleClass("categoryHover");
  });
  
  $("#category1, #submenu1").mouseleave(function(){
    $("#submenu1").toggleClass("submenuHover")
    $("#category1").toggleClass("categoryHover");
  });
  
   $("#category2, #submenu2").mouseenter(function(){
    $("#submenu2").toggleClass("submenuHover");
    $("#category2").toggleClass("categoryHover");
  });
  
  $("#category2, #submenu2").mouseleave(function(){
    $("#submenu2").toggleClass("submenuHover");
    $("#category2").toggleClass("categoryHover");
  });
    
});