JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<div class="holder">
    <p id="p1">Paragraph widget A</p>
</div>
<div class="holder">
    <p id="p2">Paragraph widget B</p>
</div>
<div class="holder">
    <p id="p3">Paragraph widget C</p>
</div>

CSS

body {
    background: black;
}
.holder {
    margin: 5px;
    border: 2px solid black;
    background: white;
    padding: 10px;
    display: inline-block;
}

p {
  border: 2px solid yellow;
  background-color: black;
  color: white;
}

span {
  border: 2px solid green;
  background-color: black;
  color: white;
}

JavaScript

(function( $ ) {
var i=1;
$.widget( "ui.para", {
    DOM : function (){
        this.DOM.actual = null;
        this.DOM.span   = null;
    },
    _create: function() {
        var span = $("<span/>")
        span.text("updated value " + i++);
        
        this.DOM = new this.DOM;
        console.log(this.DOM);
        this.DOM.actual = this.element;
        this.DOM.span   = span;
                
        this.DOM.actual.after(this.DOM.span);
        this.DOM.actual.hide()
    },
    destroy : function (){
        
        this.DOM.span.remove();
        this.DOM.actual.show();
        //$.Widget.prototype.destroy.call( this );
    }
});
})( jQuery );

$("p").para();
//$("#p2").para("destroy");
//$("#p3").para("destroy");
/*
    My issue:
The last element from $("p") always over-rides the DOM with new values.
*/