Grid Cell (2d array) Selection Problem

by Luke Nickerson

HTML

<div id="gridFrame">
    <div class="grid"></div>
</div>

CSS

#gridFrame {
    background-color: #bcc;
    padding: 2em;
    border-radius: 0.25em;
}
.grid {
    background-color: #555;
    border: solid 1px #344;
    overflow: auto;
    font-size: 10px;
    white-space: nowrap;
}
.grid > div {
    box-sizing: border-box;
    display: inline-block;
    border-top: solid 1px rgba(255,255,255,0.3);
    border-left: solid 1px rgba(255,255,255,0.3);
    width: 80px;
    height: 80px;
    color: white;
    font-size: larger;
}
.grid > div:hover {
    border: solid 1px rgba(0,0,0,0.5);
}

.alt0 {    background-color: blue;    }
.alt1 {    background-color: red;    }
.alt2 {    background-color: green;    }
.alt3 {    background-color: #430;    }
.alt4 {    background-color: #540;    }
.alt5 {    background-color: #650;    }
.alt6 {    background-color: #761;    }
.alt7 {    background-color: #872;    }
.alt8 {    background-color: #873;    }
.alt9 {    background-color: #874;    }
.alt10 {   background-color: #875;    }

JavaScript

console.log('------------------------------------');
function GridClass () {
    this.$grid = $('.grid');
    this.grid = [[]]; 
    
    this.selectSquare = function (x, y) {
        console.log("Incrementing square's selected value");
        console.log("The object at x,y = " + JSON.stringify(this.grid[x][y]));
        console.log("Full grid before:\n" + JSON.stringify(this.grid));
        this.grid[x][y].selected += 1;
        console.log("Full grid after:\n" + JSON.stringify(this.grid));
        this.drawGrid();
        console.log("Why did entire row get incremented?");
    }
    
    this.drawGrid = function () {
        var h = "", rowClass = "";
        var xLen = this.grid.length;
        var yLen = this.grid[0].length;
        for (var y = 0; y < yLen; y++) {
            for (var x = 0; x < xLen; x++) {
                var g = this.grid[x][y];
                h += '<div class="' + rowClass 
                    + ' alt' + g.selected
                    + '"'
                    + ' data-x="' + x + '"'
                    + ' data-y="' + y + '"'
                    + '>'
                    + x + "," + y;
                h += '</div>';
                rowClass = "";
            }
            rowClass = "newRow";
            h += '<br />';
        }
        this.$grid.html(h);
    }
    
    this.createGrid = function () {
        var baseSize = 3;
        this.grid = [];
        var blankYArray = [];
        for (var y = 0; y < baseSize; y++) {
            blankYArray.push({
                "selected" : 0
            });
        }
        for (var x = 0; x < baseSize; x++) {
            this.grid.push(blankYArray);
        }
    }
    
    // Construction
    this.createGrid();
    this.drawGrid();
    console.log("Initial Grid:\n" + JSON.stringify(this.grid));
}
grid = new GridClass();

grid.$grid.on("click", "div", function(e){
    var $thisSquare = $(this);
    console.log("Clicked a square");
    console.log($thisSquare);
    var x =...