JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testbox1" style="float:left;border:1px solid black;width:100px;height:100px;">TEXTBOX1
</div>
LOG:
<div id="log1" ></div>

        <div id="testbox2" style="float:right;border:1px solid black;width:100px;height:100px;">TEXTBOX2
</div>
LOG:
<div id="log2" ></div>

JavaScript

$('#testbox1').on("mousemove", function (event) {
    $("#log1").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
$('#testbox2').on("mousemove", function () {
    $("#log2").text("pageX: " + document.getElementById('testbox2').pageX + ", pageY: " + document.getElementById('testbox2').pageY);
});