JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div id = "spans">
<span>
    Widget
</span>
<span>
    Widget
</span>
</div>
<div>
  <button id='add'>Add</button>
  <button id='on'>Enable</button>
  <button id='off'>Disable</button>
</div>

CSS

div { 
    margin: 2px;
}
span { 
    padding: 2px; 
    margin: 2px;
    border: black solid 1px;
    
}

.filled { 
    background-color: #eeaa33;
}

JavaScript

enableFiller = true;

$.widget( "spacedog.filler", {
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element.hover(
            function() {
                if (enableFiller) { 
                    $(this).addClass("filled");
                }
            },
            function() {
                $(this).removeClass("filled");
            }
        );
    }
 
});

$("span").filler();

$("#on").click(function() { enableFiller = true; } );
$("#off").click(function() { enableFiller = false; } ); 
$("#add").click(function() { 
    $("<span />").appendTo("#spans").filler().text("added");
});