JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li id=menu-item-12>
            <p>something</p>
        </li>
        <li id=menu-item-9>
            <p>something</p>
        </li>
         <li id=menu-item-11>
            <p>something</p>
        </li>
    </ul>
</nav>

<div id="appendp">
    
</div>

JavaScript

$(document).ready(function() { 

	/* On hover function, over the menu items */
	$('nav ul li').hover(function(){
    	var append;
		if($('#menu-item-12').is(':hover')) {
			append = 'unlock this crap';
		}else if($('#menu-item-9').is(':hover')) {
			append = 'check your gdmn account';
		}else if($('#menu-item-11').is(':hover')) {
			append = 'check the hell out';
		}
		$('#appendp').empty();
		$('#appendp').append(document.createTextNode(append));
		
	});