JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-US"> 
</html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="tempo.js"></script>
<link rel="stylesheet" type="text/css" href="simplea3.css">
<title class='pageTitle'> Minesweeper</title>
</head>

<h1 class='gameTitle'> Minesweeper </h1>

<table id='buttonTable'>
</table>

<p class='boardSizeTitle'>What size minefield would you like? </p>

<p class='howManyColumns'>Columns: </p>
<input type='number' id='nCols' min='8' max='40'>
<br>
<p class='howManyRows'>Rows: </p>
<input type='number' id='nRows' min='8' max='30'>
<br>
<br>

<p class='howManyMines'>How many mines would you like?</p>
<div class='centered'>
<script>     
var rowNum = document.getElementById('nRows').valueAsNumber;
var colNum = document.getElementById('nCols').valueAsNumber;
var size = (rowNum*colNum)-1;
</script>

<input type='number' id='numMines' placeholder='Number of mines' class='numMinesInput' min=1 max=size>
<button type='button' class='submitButton' onclick='drawMinefield()'>Submit</button> <br>
</div>
<br>
<br>

</body>
</html>

JavaScript

var positions = []; //Array to represent all possible positions on minefield
var nMines;
var adjacentBombs = [];


function shuffle(og) { //Shuffle the positions of the mines to create random minefield
    var array = [].concat(og);
    var currentIndex = array.length, temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
}


function drawMinefield() { //Draw the minefield once user presses "Submit"

var nMines = document.getElementById('numMines').valueAsNumber; //Number of mines entered by user
var nRows = document.getElementById('nRows').valueAsNumber; //Number of rows entered by user
var nCols = document.getElementById('nCols').valueAsNumber; //Number of columns entered by user
var u = 0; //Number of bombs added to minefield

for (var i = 0; i < nRows; i++) { //Fill in adjacent bomb array
    adjacentBombs[i] = []; //2-D array
        for (var j = 0; j <nCols; j++) {
            console.log("FIRST i is : ");
            console.log(i);
            console.log("FIRST j is : ");
            console.log(j);
            adjacentBombs[i][j] = 0; //Assume 0 to start
     }
 }

for (var i = 0; i < nRows; i++) { //Fill in array to represent positions on minefield
    positions[i] = []; //2-D array
        for (var j = 0; j <nCols; j++) {
         if (u < nMines) {
             positions[i][j] = 1; //Space has bomb
             u++;
         } else {
             positions[i][j] = 0; //Space is empty: no bomb
         }
     }
 }
positions = shuffle(positions); //Now the bombs are in random locations

var tab = document.getElementById('buttonTable');
var row = $(tab).append('<tr>');

for (var i = 0; i < nRows; i++) {
    for (var j = 0; j < nCols; j++) {

        if...