JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 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>

JavaScript

var inside = false;

$(".testDiv").hover(
  function(e) /* IN */ {
    if (!inside) {
      inside = true;
      $(this).data("htmlBackup", $(this).html());
      $(this).html("TEST 123");
    }
  }, function(e) /* OUT */ {
    inside = false;
    $(this).html($(this).data("htmlBackup"));
  }
);