JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contents" id="content">
	<p id="paragrapgh">What symbol is this?</p>
	<div id="images">

	</div>
</div>
<div id="buttons">

</div>

<div id="stars">
	<!-- <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" id="imgStar1" />
	<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" id="imgStar2" />
	<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" id="imgStar3" />
	<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" id="imgStar4" />
	<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" id="imgStar5" /> -->
</div>

CSS

body {
    background-color: lightblue;
}

#paragrapgh{
	display: block;
	margin:20px auto;
	text-align:center;
}
#content{
	text-align:center;
	margin:20px autp;
}
#images img{
	max-width:300px;
	margin:0 auto;
}
#images,
#buttons{
	text-align:center;
}

JavaScript

var Game = function(){
	var _isSetup = false; // status of the game
	var currentIndex; // currently selected symbol's index
	var imageBase = 'C:\\Users\\ekene\\OneDrive\\Pictures\\'; // the base path for our images (escaped because `\` is a JS escape character, using a web url should rectify the need for this)
	// easy look ups for document elements
	var startButton = document.getElementById('startButton');
	var buttonsContainer = document.getElementById('buttons');
	var imagesContainer = document.getElementById('images');
	var starsContainer = document.getElementById('stars');
	// our symbols array
	var symbols = [
		{
			id: "train", // id should be unique amongst symbols
			image: "MapSym_TS.jpg", // image file name that will be appended to imageBase
			name: "Train Station" // pretty display name to place inside button
		},
		{
			id: "bus",
			image: "MapSym_BS.jpg",
			name: "Bus Station"
		},
		{
			id: "youth",
			image: "MapSym_YH.jpg",
			name: "Youth Hostel"
		},
		{
			id: "footPath",
			image: "MapSym_FP.jpg",
			name: "FootPath"
		},
		{
			id: "bridleway",
			image: "MapSym_BW.jpg",
			name: "Bridleway"
		},
		{
			id: "place",
			image: "MapSym_PW.jpg",
			name: "Place of Worship"
		},
		{
			id: "public",
			image: "MapSym_PH.jpg",
			name: "Public House"
		},
		{
			id: "car",
			image: "MapSym_CP.jpg",
			name: "Car"
		},
		{
			id: "road",
			image: "MapSym_RD.jpg",
			name: "Road"
		},
		{
			id: "triangulation",
			image: "MapSym_TP.jpg",
			name: "Triangulation Pillar"
		}
	]
	// public function to set up the game	
	this.init = function(){
		// short circuit if we're already setup
		if(_isSetup) return;
		_isSetup = true;
		generateButtons();
		generateImages();
		// display our first question
		newSymbol();
	}
	
	// function that is called when a guess button is clicked
	var guess = function(){
		// if the clicked button's `symbol-id` property matches the current index's id
		if(this.getAttribute('symbol-id') ===...