JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="a"></div>
</div>

CSS

div {
    width:200px;
    height:200px;
    background:red;
}

#a, #b {
    width:100px;
    height:100px;
}

#a {
    background-color:green;
}

#b {
    background-color:blue;
}

JavaScript

$(document).ready(function() {
    $('#a').click(function() {
        $(this).parent().append('<div id="b"></div>');
        $(this).remove();
    })
    
    $('#b').click(function() {
        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })
});