JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    // Created Feb 24, 2014 by Troy Whorten
    
function toggleChild() {
     div1 = document.getElementById("div1");
     div2 = document.getElementById("div2");
    target = document.getElementById("target");
    if (target.parentNode.isEqualNode(div1))
        div2.appendChild(target);
    else
        div1.appendChild(target);
}
   
function createChild() {
     div1 = document.getElementById("div1");
     div2 = document.getElementById("div2");
    target = document.getElementById("target");
    sibling = document.createElement('div');
    sibling.innerHTML = "Sibling";
    sibling.setAttribute("class","sibling");
    if (target.parentNode.isEqualNode(div1))
        div1.appendChild(sibling);
    else
        div2.appendChild(sibling);
}
    
function killSiblings() {
    siblings = document.querySelectorAll('.sibling');
    for(var i = 0; i < siblings.length; i++) 
    {
        siblings[i].parentNode.removeChild(siblings[i]);
    }
}
</script>



<div id="div1">
    <p id="target">TARGET CHILD</p>
</div>

<div id="div2">
</div>
<br>
<button onClick='toggleChild()'>Move Child</button>
<button onClick='createChild()'>Give Target Sibling</button>
<button onClick='killSiblings()'>Kill all Siblings</button>

CSS

#div1, #div2 {
    height: 200px;
    width: 200px;
    margin-top: 25px;
    overflow: hidden;
    display: inline-block;
}

#div1 {
    background-color: blue;
}

#div2 {
    background-color: red;
}

p {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #FFF;
}   

.sibling {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    background-color: pink;
}   
    
button {
    margin-top: 25px;
}