JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn_NewGame">New Game</button><button id="btn_addClass">Add Class</button>
<div id="div_GameBoard"></div>

CSS

.gamePeice{
	float:left;
	width:16%;
	height:16%;
	border:1px solid black;
	vertical-align:middle;
	text-align:center;
	background-size:100%;
}

.toggled{
     border:1px solid yellow;   
}
}

JavaScript

var GridSize=6;

//Create a new game with peices and random letters from pool
$('#btn_NewGame').click(function(){
	//Add the rows for the board
	for (var i=0; i<GridSize; i++){
		$('#div_GameBoard').append("<div id=\"row" + i + "\" class=\"rows\">");
		//Add the peices (columns) for the board
		for (var j=0; j<GridSize; j++){
			var letter = returnCharacterFromPool();
			$("#row" + i).append("<span class=\"gamePeice col" + j + " " + letter + "\">text</span>");
		}
		$('#div_GameBoard').append("</br>")
			.append("</span>");
	}
});

$('.gamePeice').click(function(){
	$(this).addClass("toggled");
});

$('#btn_addClass').click(function(){
	$('.gamePeice').addClass("toggled");
});


function returnCharacterFromPool()
{
    var possible = "AAAAAAAAABBCCDDDDEEEEEEEEEEEEFFGGGHHIIIIIIIIIJKLLLLMMNNNNNNOOOOOOOOPPQRRRRRRSSSSTTTTTTUUUUVVWWXYYZ";
	var index = Math.floor(Math.random() * possible.length);
	character = possible.charAt(index);
	possible.slice(index, 1);
    return character;
}