JSFiddle - React, Tailwind, and code Playground

HTML

DEV KEY
<br />
<input id="APIKey" />
<br />Summoner Name
<br />
<input id="summonerName" />
<input type="submit" onclick="summonerLookUp();" />
<br />
<br />Summoner Level: <span id="sLevel"></span>

<br />Summoner ID: <span id="sID"></span>
<br />
<br /># of Mastery Pages: <span id="masteryPageCount"></span>

<br />First Page's name: <span id="masteryPages1st"></span>
<hr />
5th Page's name: <span id="masteryPages5th"></span>
<br />
<br />
10th Page's name: <span id="masteryPages10th"></span>
<br />
10th Page's ID: <span id="masteryPages10thID"></span>
<br />
10th Page Active?: <span id="masteryPages10thCurrent"></span>

JavaScript

var sumName = "";   
var APIKEY = "";

function summonerLookUp() { 
    sumName = $("#summonerName").val();
    APIKEY = $("#APIKey").val();
    
    if (sumName !== "") {

        $.ajax({
            url: 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + sumName + '?api_key=' + APIKEY,
            type: 'GET',
            dataType: 'json',
            data: {

            },
            success: function (json) {
                var sumNamenospace = sumName.replace(" ", "");

                sumNamenospace = sumNamenospace.toLowerCase().trim();

                summonerLevel = json[sumNamenospace].summonerLevel;
                summonerID = json[sumNamenospace].id;

                document.getElementById("sLevel").innerHTML = summonerLevel;
                document.getElementById("sID").innerHTML = summonerID;

                // NEW FUNCTION!
                letsGetMasteries(summonerID);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error getting Summoner data 1!");
            }
        });
    } else {}
}

function letsGetMasteries(summonerID) {
    $.ajax({
        url: "https://na.api.pvp.net/api/lol/na/v1.4/summoner/" + summonerID + "/masteries?api_key=" + APIKEY,
        type: 'GET',
        dataType: 'json',
        data: {

        },
        success: function (resp) {
            numberOfPages = resp[summonerID].pages.length;
            numberOfPage1 = resp[summonerID].pages[0].name;
            
            document.getElementById("masteryPageCount").innerHTML = numberOfPages;
            document.getElementById("masteryPages1st").innerHTML = numberOfPage1;
            
        //ANSWERS
            page5Name = resp[summonerID].pages[4].name;
            // [4] ?!? Well count: 0, 1, 2, 3, 4. That's 5 numbers, or the fifth page :)
                                        document.getElementById("masteryPages5th").innerHTML = page5Name;
       
            
           ...