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() {
// Prototype Pattern - Multiple Instances
var prototypeModule = function( el ) {
this.init( el );
};
prototypeModule.prototype = function () {
var privateVar;
// @public
function init( el ) {
privateVar = $( el );
privateVar.on( 'click', clickFunction );
privateFunction();
}
function clickFunction() {
privateVar.addClass('click');
}
function privateFunction() {
console.log( 'Proto: ' + privateVar.attr('id') );
}
return {
init: init
}
}();
$('.test').each(function() {
new prototypeModule( this );
});
});