JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
    <div id="a">
        <div>Hi</div>
    </div>
    <div id="b">
        <div>Hi2</div>
    </div>
</div>
<button>Change Me</button>

CSS

#block {
    background-color:#888;
    width:300px;
    height:300px;
}
#block2 {
    background-color:#888;
    width:300px;
    height:300px;
}

JavaScript

var a = $("#a").html();
var b = $("#b").html();
var html = "";

$("body").on("mouseenter", "#block", function () {
    $(this).css("backgroundColor", "red");
}).on('mouseleave', "#block", function () {
    $(this).css("backgroundColor", "#888");
});

$("button").click(function () {
    if (html == "") {
        html = b;
        html += a;

        $("#block").attr("id", "block2").html(html);
    } else {
        html = a;
        html += b;
        $("#block2").attr("id", "block").html(html);
        html = "";
    }
});