JSFiddle - React, Tailwind, and code Playground

HTML

<br /> Select Region
<br />
<select id="region">
  <!--select options-->
  <option value="euw">euw</option>
  <option value="na">na</option>
  <option value="kr">kr</option>
  <option value="eune">eune</option>
  <option value="br">br</option>
  <option value="jp">jp</option>
  <option value="lan">lan</option>
  <option value="las">las</option>
  <option value="oce">oce</option>
  <option value="ru">ru</option>
  <option value="tr">tr</option>
</select>
<br /> <font size="6"> Summoner Name </font>
<br />
<input id="userName" />
<input type="submit" onclick="summonerLookUp();" />
<br />
<br /> Summoner Level: <span id="sLevel"></span>
<br />Summoner ID: <span id="sID"></span>
<br /> Current Game
<table>
  <tr>
    <td> <span id=0></span> </td>
    <td> <span id=1></span> </td>
    <td> <span id=2></span> </td>
    <td> <span id=3></span> </td>
    <td> <span id=4></span> </td>
  </tr>
  <tr>
    <td> x</td>
    <td> x </td>
    <td> x </td>
    <td> x </td>
    <td> x </td>
  </tr>

  <tr>
     <td> <span id=5></span> </td>
    <td> <span id=6></span> </td>
    <td> <span id=7></span> </td>
    <td> <span id=8></span> </td>
    <td> <span id=9></span> </td>
  </tr>


</table>

JavaScript

platformID = "EUW1";
region = "euw";

function summonerLookUp() {
  region = $("#region").val();
  SUMMONER_NAME = $("#userName").val();
  	switch(region) {
    case "euw":
       platformID = EUW1;
        break;
    case "br":
       platformID = BR1;
        break;
    case "eune":
       platformID = EUN1;
        break;
     case "kr":
       platformID =  KR;
        break;
     case "jp":
       platformID =  JP1;
        break;
     case "lan":
      platformID =   LA1;
        break;
     case "las":
       platformID =  LA2;
        break;
     case "na":
     platformID =    NA1;
        break;
     case "oce":
     platformID =    OC1;
        break;
     case "tr":
     platformID =   TR1;
        break;
     case "ru":
     platformID =   RU;
        break ;          
    default:
        error: region error;
}

  // code to set the region to region on dropdown menu

  if (SUMMONER_NAME !== "") {

    $.ajax({
      url: 'https://' + region + '.api.pvp.net/api/lol/' + region + '/v1.4/summoner/by-name/' + SUMMONER_NAME + '?api_key=RGAPI-b4bc0413-4ade-4dae-b8ab-674e6398f1e4', // with my api key 
      type: 'GET',
      dataType: 'json',
      data: {

      },
      success: function(json) {
        var SUMMONER_NAME_NOSPACES = SUMMONER_NAME.replace(" ", "");

        SUMMONER_NAME_NOSPACES = SUMMONER_NAME_NOSPACES.toLowerCase().trim();

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

        document.getElementById("sLevel").innerHTML = summonerLevel;
        document.getElementById("sID").innerHTML = summonerID;
        //method call
        getCurrentGameInfo(summonerID);

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



  } else {}
}

function getCurrentGameInfo(summonerID) {
  $.ajax({
    url: 'https://' + region + '.api.pvp.net/observer-mode/rest/consumer/getSpectatorGameInfo/' +...