JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="wrapper">
			<header>
				<h1> Coordinates </h1>
			</header>
			<button id="clear"> Clear list </button>
			<div id="list"> 
				<ol id="coordList"></ol>
			</div>
		</div>
	</body>

JavaScript

$(document).click(function(e){
	$("#coordList").append("<li>"+ "pageX: " + e.pageX + ", pageY: " + e.pageY +"</li>"); 
});
			
$( "#clear" ).click(function(event) {
        event.stopPropagation();
	$("#coordList").empty();
});