JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>		
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>

<div class="container">
    <h1><a href="#">Hello World</a></h1>
    <button class="btn" id="createWidget">Create widget</button>
    <button class="btn" id="destroyWidget">Destroy widget</button>
    <button class="btn" id="disableWidget">Disable widget</button>
</div>
<div id="status" style="color: red; font-weight: bold;"></div>

<p>
    try this two scenarios (remember to rerun fiddle after each destroy):
    <ol>
        <li style="margin-bottom: 10px;">
            <ul>
                <li>Create widget</li>
                <li>Destroy widget, pay attention to DESTROYED text</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Create widget</li>
                <li>Disable widget</li>
                <li>Destroy widget</li>
            </ul>
        </li>
    </ol>
</p>

JavaScript

(function($) {    
	// Colorizer widget.
	$.widget("snc.simpleWidget", {
		options: {},
		_create: function() {
			this.element.text("Widget created");
		},
		
		_destroy: function() {
			this.element.text( "Widget destroyed" );
			$("#status").text("DESTROYED")
		},
		
		disable: function(){
				this._super();
				this.element.text( "Widget disabled" );
			}
	});
			
	
	// Implementation
	
	$("#createWidget").click(function () {
		$("a").simpleWidget();
	});
	
	$("#destroyWidget").click(function () {
		$("a").remove();
	});
	
	$("#disableWidget").click(function () {
		$("a").simpleWidget("disable");
	});
})(jQuery);