JSFiddle - React, Tailwind, and code Playground

by CME64

HTML

<div id="container"></div>

CSS

.card{
    background-color:red;
    width:50px;
    height:50px;
}

JavaScript

var init = function() {
    //variable declaration
    var GRID_WIDTH = 2,
        GRID_HEIGHT = 2,
        FACE_DOWN = 0;
    
    var c1 = "card";
    var c2 = "card cardfirstInRow";
    var gridClass = "";
    var cardID = "";
    // end variable declaration

    // creating DIV-s on the fly
    for (var x = 0; x < GRID_WIDTH; x++) {
        for (var y = 0; y < GRID_HEIGHT; y++) {
            y === 0 ? gridClass = 'card cardfirstInRow' : gridClass = 'card';
            cardID = x+''+y; //returns a unique number converted to string

            $('<div/>',{
                class: gridClass,
                id: cardID,
                click: function(e) {
                    alert($(this).attr('id'));
                    },
                mouseover: function(){
                    $(this).css('background-color','yellow');
                },
                mouseout: function(){
                    $(this).css('background-color','red');                
                    }
                }).appendTo('#container');
        }
    }
}

init();