JSFiddle - React, Tailwind, and code Playground

HTML

<p class="test" id="test1">Click Me</p>
<p class="test" id="test2">Click Me</p>
<p class="test" id="test3">Click Me</p>

CSS

.click:after {
   color: red;
   content: " Clicked";
}

JavaScript

$(function() {
    // Module Pattern - One instance
    var firstModule = (function() {
        var privateVar = 'String';
        
        // @public
        function init() {
            console.log('Public Function');
        }
        
        return {
            init: init
        }
    })();
    
    // Module pattern - Multiple instances
    var secondModule = function() {
        var privateVar;
        
        // @public
        function init( el ) {
            privateVar = $( el );
            
            privateVar.on( 'click', clickFunction );
            
            privateFunction();
        }
        
        function clickFunction() {
            privateVar.addClass('click');
        }
        
        function privateFunction()  {
            console.log( privateVar.attr('id') ); 
        }
        
        return {
            init: init
        }
    };
    
    //firstModule.init();
    
    $('.test').each(function() {
        secondModule().init( this );
    }); 
});