JSFiddle - React, Tailwind, and code Playground

HTML

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

JavaScript

alert('initial script load');
$(document).ready(function() {
    alert('topsignInCheck');
    logonCheckText = 'invalid';
    htmlobj = 'invalid';
    topUserNameCheck = $('[id=userNameTextField]').val();
    topPasswordCheck = $('[id=passwordTextField]').val();
    var urlLink='../PHP/LogonCheck2.php?passwordTextField=' + topUserNameCheck + '&passwordTextField=' + topPasswordCheck;
    alert(urlLink);
    
    var logonCheckQueryCheck;
    $.ajax({
        // this URL must conform to the Same Origin Policy
        // see: https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript
        url: urlLink,
        success: function(response, status, xhr)
        {
            alert('XHR success');
            logonCheckQueryCheck = response;
            
            alert('global: ' + logonCheckQueryCheck);
            
        }

    });
    //alert('DOM ready');
    $("button").click(onClick);
});
var page_global;

function onClick() {
    alert('click');
    var click_handler_level_variable;
    $.ajax({
        // this URL must conform to the Same Origin Policy
        // see: https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript
        url: "/JFSIII/smKCf/show/",
        success: function(response, status, xhr) 
        {
            alert('XHR success');
            page_global = response;
            $("div").html(response);
            alert('global: ' + page_global);
            alert('click level: ' + click_handler_level_variable);
        }

    });
}