JSFiddle - React, Tailwind, and code Playground

HTML

<div id="metal"></div>

CSS

#metal{
    width: 10px;
    height: 10px;
    background:red;
}

JavaScript

;(function ( $, window, document, undefined ) {

    // Create the defaults once
    var pluginName = 'Extender',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        if (this[options]){
            this[options](this.element);
        } else {
            this.init(this.element);
        }
    }

    Plugin.prototype = {
        init : function (element) {
            console.log($(this.element).width());
           $(element).width($(element).width() + 30);
        },
        add50 : function(element){
           $(element).width($(element).width() + 50);
                      alert('50');
        },
        add150 : function(element){
           $(element).width($(element).width() + 150);
           alert('150');
        }

     };
    
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );
    
$('#metal').Extender({test:'aa'});    
$('#metal').Extender('add50');