JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hangmanGame">
            <div id="wordGuess">  </div>
            <table >
                <tr> 
                    <td><button class="alphabet" type="button"> </button></td>
                    <td> <button type="button" onclick="guess('A')" id="1" class="alphabet">A </button></td> 
                    <td> <button type="button" onclick="guess('B')" id="2" class="alphabet">B </button></td>
                    <td> <button type="button" onclick="guess('C')" id="3" class="alphabet">C </button></td>
                    <td> <button type="button" onclick="guess('D')" id="4" class="alphabet">D </button></td>
                    <td> <button type="button" onclick="guess('E')" id="5" class="alphabet">E </button></td>
                    <td> <button type="button" onclick="guess('F')" id="6" class="alphabet">F </button></td>
                    <td> <button type="button" onclick="guess('G')" id="7" class="alphabet">G </button></td>
                    <td> <button type="button" onclick="guess('H')" id="8" class="alphabet">H </button></td>
                    <td> <button class="alphabet" type="button"> </button></td></tr>
                <tr> 
                    <td> <button class="alphabet" type="button"> </button></td>
                    <td> <button type="button" onclick="guess('I')" id="9" class="alphabet">I </button></td>
                    <td> <button type="button" onclick="guess('J')" id="10" class="alphabet">J </button></td>
                    <td> <button type="button" onclick="guess('K')" id="11" class="alphabet">K </button></td>
                    <td> <button type="button" onclick="guess('L')" id="12" class="alphabet">L </button></td>
                    <td> <button type="button" onclick="guess('M')" id="13" class="alphabet">M </button></td>
                    <td> <button type="button" onclick="guess('N')" id="14" class="alphabet">N </button></td>
                    <td> <button type="button" onclick="guess('O')" id="15"...

JavaScript

var words = ['dog', 'mouse', 'horse', 'fossil', 'christmas', 'mountain', 'javascript', 'glitter', 'pringles', 'connect'];
        var output = "";
        var gRand = "";
        var gWordAry = "";
        function startGame() {
            var rand = words[Math.floor(Math.random() * words.length)]; //gets a random word from the array, stores as rand
            var wordAry = rand.split(''); //splits random word into its own array and each letter is in the array
            gRand = rand; //stores random word as global var
            gWordAry = wordAry;
            alert(wordAry);
            $('#hangmanGame').show();
            $('#startBtn').hide();
            //alert(rand);
            for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
                //draw canvas dash
                output += "<span class='letter" + wordAry[i] + "'> _ </span>";
                $('#wordGuess').html(output);
            }


            //alert(output);


        }

function guess(letter) {
            var letterID = letter.toLowerCase(); //converts letter to lowercase from html
            //alert(letterID);
            var foundLetter = displayLetter(letterID);
            if (foundLetter == 0){ //if no letters in the array are found this will run
                alert('Try Again');
            }

        }

        function displayLetter(letterID){
            //displays all letters in the word
            $(".letter"+letterID).html(letterID);
            return $(".letter"+letterID).length;
        }
 $(document).ready(startGame);