JSFiddle - React, Tailwind, and code Playground

by Purag Moumdjian

HTML

<div id="beforeblah">beforeblah</div>
<div id="blah">blah</div>
<button class="insertBefore">insert Before</button>
<button class="insertAfter">insert After</button>
<div id="status"></div>

CSS

#beforeblah {
    width:70px;
    height:40px;
    margin:5px;
    background:red;
}

#blah {
    width:100px;
    height:40px;
    margin:5px;
    background:blue;
}

#between {
    width:85px;
    height:40px;
    margin:5px;
    background:green;
}

#status {
    width:300px;
    height:150px;
    overflow:auto;
}

JavaScript

function clear(){
    $("#between").remove();
    $("#status").append("cleared",$("<br>"));
}

$(".insertBefore").click(function(){
    clear();
    $("<div>").prop("id","between").insertBefore("#blah");
    $("#status").append("inserted Before #blah",$("<br>"));
});

$(".insertAfter").click(function(){
    clear();
    $("<div>").prop("id","between").insertAfter("#beforeblah");
    $("#status").append("inserted After #beforeblah",$("<br>"));
});