JSFiddle - React, Tailwind, and code Playground

HTML

<div id="moo">
    <a class="charname" href='#'>Percy</a>
    
    Hello
</div>

CSS

#moo {
    
    display: block;
     width: 200px;
   height: 200px; 
}

JavaScript

$(function() {
    $('#moo').live('hover', function() {
       t = $(this);
$('a.charname', t).live('click', function(e) {
    e.preventDefault();
    // spawn a menu
    console.log("hi");
    var cr = $(this);
    if ( cr.attr('charmenuspawned') != 'true') {
        sp=1;
        cr
            .attr('origtext', cr.text())
            .attr('charmenuspawned', true)
            .after('<div class=charmenu><ul>'
                +'<li><a href="#" class="item_highlight" speech="'+sp+'">Highlight Character</a></li>'
                +'<li><a href="#" class="item_context" speech="'+sp+'">Context and Criticism</a></li>'
                +'<li><a href="#" class="item_showscenes" speech="'+sp+'">Show Scenes</a></li>'
                +'</ul></div>');
        
        $('div.charmenu', cr.parent()).fadeIn();
    }
});    

});

});