JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>Javascript/jQuery Project</title>
        <link rel="stylesheet" href="odin.css">
        <meta charset="UTF-8">
        <script src="odinjquery.js"></script>
    </head>
    
    <body>
        <section id="buttons">
            <button type="button" id="black">Reset Black</button>
            <button type="button" id="random">Reset Random</button>
            <button type="button" id="fiftyshades">Reset 50 Shades</button>
        </section>
        <div class="container">
            <div class="knob"></div>
            <div class="knob" id="knob2"></div>
        </div>
        <script src="odin.js"></script>
    </body>

</html>

CSS

.grey {
    float: right;
    background-color: grey;
    height: 5px;
    width: 5px;
    margin: 0px;
    padding: 0px;
}
.container {
    clear: both;
    position: relative;
    height: 500px;
    width: 500px;
    margin: 0px auto;
    border: 35px solid red;
    border-bottom: 80px solid red;
    border-radius: 25px;
}
.black {
    background-color: black;
}
button {
    display: inline;
    float: left;
    background-color: #0066FF;
    border: none;
    color: white;
    font-weight: bold;
    display: block;
    margin: 10px 5px;
    padding: 5px 10px;
}
#buttons {
    margin: 0px auto;
    width: 32%;
}
.knob {
    position: absolute;
    background-color: white;
    height: 85px;
    width: 85px;
    border-radius: 100px;
    margin-top: 490px;
}
#knob2 {
    margin-left: 415px;
}
.fiftyshades {
    background-color: black;
    opacity: 0.1;
}

JavaScript

$(document).ready(function () {

    var reset = function () {
        var w = prompt("How many blocks per side?");
        var newDim = $(".container").width() / (w);
        $(".black").remove();
        $(".grey").remove();
        for (i = 0; i < Math.pow(w, 2); i++) {
            $('.container').append('<div class="grey"></div>');
        }
        $(".grey").css("height", newDim);
        $(".grey").css("width", newDim);
    }

    reset();

    $(".grey").mouseenter(function () {
        $(this).addClass("black");
    });

    $("#black").click(function () {

        reset();

        $(".grey").mouseenter(function () {
            $(this).addClass("black");
        });
    });

    $("#random").click(function () {

        reset();

        function getRandomColor() {
            return '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6)
        }
        $(".grey").mouseenter(function () {
            $(this).css("background-color", getRandomColor());
        });
    });

    $("#fiftyshades").click(function () {

        reset();



        $(".grey").mouseenter(function () {
            if (!$(this).hasClass("fiftyshades")) {
                $(this).addClass("fiftyshades");
                console.log("Adding fiftyshades")
                if ($(this).hasClass("fiftyshades")) {
                    console.log("Add was success");
                    console.log("Classes: ")
                    var className = $(this).attr('class');
                    console.log("     " + className);
                }
            }
        });

        $(".container").on('mouseenter', ".fiftyshades", function (e) {
            var shade = parseFloat($(this).css("opacity"));
            console.log("Shade: " + shade);
            if (shade < 1) {
                $(this).css("opacity", shade + 0.1);
            }
        });
    });

});