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 = "";

$("#block").hover(function() {
     $(this).css("backgroundColor", "red");
}, 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= "";
    }
});