JSFiddle - React, Tailwind, and code Playground

HTML

<p id="yourTextContainer">asdasda asdasda asdasd asdasdsdasd asdasdasd asdasd asd asdas asdasda ad asdasd asd asd asd asd asd asda asdasd a asd as asd asd asd asdsdasdadad asd</p>

JavaScript

$(document).ready(function(){
var words=$("#yourTextContainer").text().split(' ');
$("#yourTextContainer").html("");

$.each(words, function(i,val){
//wrap each word in a span tag 
$('<span/>').text(val +" ").appendTo("#yourTextContainer");

});
$("#yourTextContainer span").live("mouseover",function(){
//highlight a word when hovered 

$(this).css("background-color","yellow");
});
$("#yourTextContainer span").live("mouseout",function(){
//highlight a word when hovered 
    
if($(this).css("background-color") !="rgb(0, 0, 255)")
{
$(this).css("background-color","white");
}
});
$("#yourTextContainer span").live("click",function(event){event.stopPropagation();
                                                          $("#yourTextContainer span").css("background-color","white");
$(this).css("background-color","blue");
    
//gets the text of clicked span tag
var text = $(this).text();
    //alert("You just selected "+text);
    
});
});