JSFiddle - React, Tailwind, and code Playground

HTML

<div class='hover'>Hover me!</div>
<div id='box'></div>

CSS

.hover {
    cursor: pointer;
    color: blue;
    margin: 10px;
    padding: 4px;
    background: yellow;
    position: relative;
}

#box {
    width: 100px;
    height: 100px;
    background: orange;
    position: relative;
}

.blue {
    background: blue !important;
}

JavaScript

// The hover for the original element will toggleClass the "blue" class properly and show one alert.

// The hover for the clone double-fires the handler, so the toggleClass is called again, and you get 2 alerts.

var $hoverbox = $('.hover').hover(function(e) {
    $('#box').toggleClass('blue');
    alert(e.type);
});

$hoverbox.clone(true).text("Hover clone").appendTo('body');