JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickable">
    <button class="start">Default</button>
    <button class="random">Randon</button>
    <button class="gradient">Gradient</button>
    <button class="trail">Trail</button>
    <button class="clear">Clear</button>
    <div id="start">Please click on one of the buttons to get started!</div>
</div>
<div class="wrapper"></div>

CSS

.row {
    width: 100%; color: #888888; opacity: .5; height: 10px;
}

JavaScript

$(".start").click(function () {
    total = prompt("Please enter a number");
    console.log("Total is", total);
    createGrid(total);
});

function createGrid(total) {
    var $container = $(".wrapper");
    for (var rowIndex = 0; rowIndex < total; rowIndex++) {
        var rowId = "row-" + rowIndex;
        var $row = $("<div>", {
            "class": "row",
            "id": rowId
        });
        for (var columnIndex = 0; columnIndex < total; columnIndex++) {
            var columnId = rowIndex + "-col-" + columnIndex; //Not needed.
            var $column = $("<div>", {
                "class": "column",
                "id": columnId
            });
            $row.append($column);

        }
        $container.append($row);
    }
}