JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="red" id="testItem">Test text</h1>
<h2 id="newTestItem">New test text</h2>
<a href="" id="underline">Underline</a>

CSS

.underline {
    text-decoration: underline;
}

JavaScript

(function($) {
        "use strict";
    
        $.fn.testPlugin = function(options) {
    
            // Settings
            var settings = $.extend({
                newText : "Yabadabado"
            }, options);
    
            return this.each(function(i, el) {            
    
                var init = function(callback) {
                    if( $(el).attr("class") === "red" ) {
                        $(el).css("color","red");
                    }
                    
                    $(el).text(settings.newText);
    
                    if( callback && typeof(callback) === "function" ) {
                        callback();
                    }
                };
    
                var underline = function() {
                    $(el).addClass("underline");
                };
    
                init();
            });
        };
        
    }(jQuery));
    
    
    var doTest = $("#testItem").testPlugin({
        newText: "Scoobydoo"
    });

    var doNewTest = $("#newTestItem").testPlugin({
        newText: "kapow!"
    });
    
    $("#underline").click(function(e) {
        e.preventDefault();
        doTest.underline();
    });