JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
            
            <div id="subjectWrapper">
            
                <div id="subjectSelection" class="content grid">
                
                    <h2>Select Subject</h2>
                    
    
                    <div id="141button" class="unit one-of-three border"><p>Subject name</p></div>
                
                </div>
            
                <div id="141TopicSelection" class="content grid topic">
                
                    <h2>Select topic</h2>
                    
                    <div id="UMLbutton" class="unit one-of-three border"><p>Topic name</p></div>
                
                </div>
            
            </div>  

    
            <div id="gameArea" class="content grid">
                
                <!--<h1>Revision Tool</h1>-->
                 
                <!------------Question------------->
                <div class="unit one-of-five"></div>
                <div id="questionSlot" class="unit three-of-five border"></div>
                <div class="unit one-of-five"></div>
                
                <!------------Answers--------------> 
                <div id="answer0" class="unit one-of-three border"></div>     
                <div id="answer1" class="unit one-of-three border"></div> 
                <div id="answer2" class="unit one-of-three border"></div>
                
                <!-----------Feedback-------------->
                <div id="feedback"></div>
                <div id="feedbackPercentage"></div>
                <div id="tester"></div>

            </div>
                        
        </div>

JavaScript

$(document).ready(function (e){

    //Set up the game area on load
    $('#gameArea').hide();
    $('#141TopicSelection').hide();
    
    
    //Subject Selection
    $('#141button').click(function(){
        $('#141TopicSelection').show(1000);   
    });
    
    
    
    
    //Question set selection
    $('#UMLbutton').click(function(){
        setSelection = 0;
        questionSelection();
        
        $('#gameArea').show(700);
        $('#subjectWrapper').hide(1000);
        $('#141TopicSelection').hide(2000);
        
        displayQandA();
    });
    
    
    
    
    //Handle answer click events
    $("#answer0").click(function(){
        selectedAnswer = 0;
        answerClicked()
    });
    $("#answer1").click(function(){
        selectedAnswer = 1;
        answerClicked()
    });
    $("#answer2").click(function(){
        selectedAnswer = 2;
        answerClicked()
    });

});


//-----------------------Game functionality------------------------//

var setSelection = 0;
var tempQuestions = new Array();
var tempAnswers = new Array();
var selectedAnswer = 99;
var randomQuestion = 99;
var barUpdate = 0;
var barWidth = 0;
var arrayLength = 0;
var progressUpdate = 0;
var guesses = 0;


//Display question and answer.
function displayQandA(){
    
    randomQuestion = Math.floor(Math.random() * 3);
    
    //Clear contents the Q & A slots
    for (var i =0; i < 3; i++){
        $('#answer' + [i]).empty();
        $('#answer' + [i]).removeClass('blankedOut');
    }
    $('#questionSlot').empty();
    
    //Inject three answers into the answer slots.
    for (var i =0; i < 3; i++){
        $('<div>' + tempAnswers[i] + '</div>').appendTo('#answer' + [i]);
    }
    
    //Insert random question chosen from the three displayed answers
    $('<div>' + tempQuestions[randomQuestion] + '</div>').appendTo('#questionSlot');
}

//Test selected answer on click.
function answerClicked(){
    
    //To test for correct answer the data of each array is...