JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<div class="freetext">
    Lorem ipsum benedicat
    <span class="explain">BIP</span> loerm lorem
</div>

CSS

.freetext{
    font-size: 150%;
    line-height: 130%;
}

.explain {
    color: orange;
    text-decoration: underline;
    cursor: pointer;
}

.explain::after {
    content: " (click to explain)";
}

JavaScript

$( document ).ready( function() {    
    
    $( document ).on( "click", ".explain", function() {
        var content = $(this).text();
        alert( "you clicked " + content );
    });
    
    // insert new node afer 5s
    setTimeout( function() {
        $("div.freetext").first().append("<span class='explain'>GDP</span> Dolores lorem ipsum likes much yo");
    }, 2000 );

});