JSFiddle - React, Tailwind, and code Playground

by Aleksey Pshenichnov

HTML

<div id='widgetB'></div>

<button id='actionBtn'>Action</button>

JavaScript

$(function () {
    $.widget("custom.widgetA", {

        options: {
        },

        _create: function () {
            this.element
                .addClass('ui-widget-a')
                .append(
                    $(document.createElement('div')).text('Widget A')
                );
        },

        someMethod: function() {
            return 'widget A';
        },
        
        _refresh: function () {
        },

        _destroy: function () {
        }
    });

}(jQuery));

$(function () {
    $.widget("custom.widgetB", $.custom.widgetA, {

        options: {
        },

        _create: function () {
            this.element
                .addClass('ui-widget-b')
                .append(
                    $(document.createElement('div')).text('Widget B')
                );
            
            this._super();
        },

        someMethod: function() {
            return 'widget B';
        },
        
        _refresh: function () {
        },

        _destroy: function () {
        }
    });

}(jQuery));

$(document).ready(function() {
    $('#widgetB').widgetB();
    
    $('#actionBtn').click(function() {
        console.log($('#widgetB').widgetA('someMethod'));
    });
});