JSFiddle - React, Tailwind, and code Playground

by chad_888

HTML

<div class="border">
    <div id="test">Loading</div>
</div>
<div class="border2">
    <div id="test2">Loading</div>
</div>
<div class="border">
    <span id="events"></span>
</div>

CSS

.border { border: 1px solid;}
.border2 { border: 2px solid red;}

JavaScript

(function ($) {
    $.fn.test = function (options, values, params) {
        return this.each(
            function () {
                var ttt = "<div id=\"status_button\" >{this.SelectedItem.caption}<ul><li><img src=\"assets/icon-online.png\"/>Online</li><li><img src=\"assets/icon-online.png\"/>Offline</li></ul></div>";
            var elem2 = $(ttt);
                elem2.find("ul").hide();
        elem2.hover(function(){$("#events").append("hover<br/>");},
              function(){$("#events").append("out<br/>");})
                $(this).replaceWith(elem2);
            });
    }
})(jQuery);


$(document).ready(function(){
    var elem = $("<div>test_element</div>").
        hover(function(){$("#events").append("hover<br/>");},
              function(){$("#events").append("out<br/>");})
        
    $("#test").replaceWith(elem);
    $("#test2").test();
    $("body").append(elem.clone(true));
});