JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gridLayout" class="gridLayout">
    <div id="gridHeader">
        	<h2>Aperture Configuration:</h2>
Grid Size:
        <input id="rows" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();"/>x
            <input id="cols" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();"/>
    </div>
    <div id="grid" class="gridContainer"></div>
</div>

CSS

.gridContainer {
    position: relative;
    margin-top: 10px;
    padding: 0 0 0 0;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}
.cell {
    width: 36px;
    height: 36px;
    position: relative;
    float: left;
    z-index: 0;
    font-size: 18px;
    color: #888888;
    text-align: center;
    line-height: 36px;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    cursor: pointer;
}
.cell:hover {
    background: #00CCFF;
}
.cell:hover:after {
    content: attr(data-hover-text);
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    color: #444444;
    text-align: left;
    line-height: 1;
}

JavaScript

(function (GRASP, $) {
    var GRID_ROWS,
    GRID_COLS,
    GRID_ELEMENT;

    GRASP.config = {
        gridContainer: "grid",
        matrixContainer: "matrix",
        matrixHeader: "matrixHeader"
    };

    GRASP.start = function () {
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        createGrid();
    };

    function createGrid() {
        GRID_ELEMENT = $("#" + GRASP.config.gridContainer);
        var cell; // Contains the 1 or 0 based upon the cell selection
        var newGrid = $('<div id="grid" class="gridContainer" ></div>');
        

        for (var i = 1; i <= GRID_ROWS; i++) {
            for (var j = 1; j <= GRID_COLS; j++) {
                $("<div class='cell' data-hover-text='"+i+","+j+"'>0</div>")
                    .appendTo(newGrid)
                    .on("click", cellClick);
            }
        }

        newGrid.height(38 * GRID_ROWS);
        newGrid.width(38 * GRID_COLS);
        
        GRID_ELEMENT.replaceWith(newGrid);
    }

    function cellClick() {
        $(this).text($(this).text() == "0" ? "1" : "0");
    }


}(window.GRASP = window.GRASP || {}, jQuery));

$(document).ready(function () {
    GRASP.start();
});