JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rightSide">
    <div id="panel1">I am panel1</div>
    <div id="panel2">I am panel2
        
        <input type="text" id="textBox1" />
        <script type="text/javascript">
            <!--//
            $("#textBox1").click(function(e){
            LOG("default event");
        });
            //-->
        </script>
    
    </div>
    <div id="panel3">I am panel3</div>
</div>

<div id="log"></div>

<button id="simulate">Simulate Ajax Request 1</button>

CSS

#rightSide {padding:0 0 20px}

JavaScript

function LOG(msg){
    $("#log").text(msg).show().fadeOut(600);
}

$("#simulate").bind("click", function() {
    $.ajax({
        type: 'POST',
        url: '/echo/html/',
        //simulated ajax response html:
        data: {
            'html': '<div id="rightSide"><div id="panel1">I am panel1</div><div id="panel2">I am CHANGED panel2<input type="text" id="textBox1" /><script>$("#textBox1").click(function(e){LOG("reloaded  event");});</script></div><div id="panel3">I am panel3</div></div>'
        },
        success: function(data) {
            //saving necessary panel HTML to a variable. Notice data attribute as context here:
            var updatedPanelHTML = $("#panel2", data).html();
            //changing html of specific panel only
            $("#panel2").css("background", "yellow")
                .html(updatedPanelHTML)
                .animate({
                    "background-color": "#fff"
                }, 500);
        }
    });
});