JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>


    <!-- JS files (order matters!) -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
    <script type="text/javascript" src="..\Scripts/ZoomOnMouseHover.js">/* plug-in that enables div zooming */</script>

    
    <script type="text/javascript">
    $(function (){
        $(".testDiv").hover(
        function(e) /* IN */ {
            $(this).data("htmlBackup", $(this).html());
            $(this).html("TEST 123");
            e.stopPropagation();
            return false;
        }, function(e) /* OUT */ {
            $(this).html($(this).data("htmlBackup"));
            e.stopPropagation();
            return false;
        });
    });            
    </script>
</head>

<body>

    <!-- this one works -->
    <div class="testDiv" style="border: solid">ORIG HTML</div>

    <br /> <br /> <br />

    <!-- this doesn't work -->
    <div class="testDiv" style="border: solid"> <p style="border: solid">ORIG HTML</p></div>

</body>
</html>