JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="did" class="one">
    Hover Here...
  </div>
</div>

CSS

.one {
  background-color: lightgreen;
  height: 20px;
  width: 180px;
}

.two {
  border: 1px solid red;
}

JavaScript

$(function() {

  $('#did:not(.bound)').addClass('bound').hover(function(e) {
    console.log('here');
    if (!$('#did').hasClass('two'))
      $('#did').addClass('two');
  }, function(e) {
    console.log($('#did').hasClass('two'));
    if ($('#did').hasClass('two'))
      $('#did').removeClass('two');
  });

});

$(function() {

  $('#did:not(.bound)').addClass('bound').hover(function(e) {
    console.log('here2');
    if (!$('#did').hasClass('two'))
      $('#did').addClass('two');
  }, function(e) {
    console.log($('#did').hasClass('two'));
    if ($('#did').hasClass('two'))
      $('#did').removeClass('two');
  });

});