JSFiddle - React, Tailwind, and code Playground

HTML

<p><h3>Click count:<span id="output">
                </span></h3></p>


                <h3>Click locations:</h3>
                <div id="clickLocations"></div> 
        <input id="btn" type="button" value="Validate">

JavaScript

$(document).ready(function() {
    var count = 0;
    //note this will only capture events on the "body" not everywhere in the window
    $(document).click(function (event) {
        
        //do not count the button click
        if (event.target.id=="btn") {
            
              $("div#clickLocations").html('');
            $("span#output").empty();
            //reset counter
count = 0;
            event.stopPropagation();
            
            
            
        

        } else {
             count += 1; //Count clicks when the body is clicked
        if (count > 0) {
            $("span#output").html(" " + count);
            $("div#clickLocations").append("<ul><li>" + event.pageX + ", " + event.pageY + "</li></ul>"); //Display the x,y location of the click
        }
            
        }
       
    }); //End body.click
}); //End document.ready