从数组Javascript

Question

我试图从一组字母创建一个基本上是7x3网格的东西。我希望能够操纵网格的每个单元格中字母的不透明度。我在底部附上了一张图，更好地说明了这一点。目前我在将信件附加到第一行之后的任何行时遇到问题，知道如何纠正这个问题也会让我知道如何创建一个随机选择器，但我无法解决什么是错误。我是Javascript的新手所以任何指针都会非常感激。

编辑：jsfiddle

JS

var $grid = $('#grid-cnt'),
    rows = 3,
    gridH = $grid.height(),
    cellH = gridH/rows;

var gridArray = [
    ['C'],
    ['O'],
    ['M'],
    ['P'],
    ['A'],
    ['C'],
    ['T'],
];

for (var col = 0; col < gridArray.length; ++col){
   var $column = $('<div class="column">');

   $column.attr('col', col)
   for (var row = 0; row < rows; ++row){
       var $cell = $('<div class="cell">');

       $cell.attr('row', row);
       // $cell.css('width', cellW);
       $cell.css('height', cellH);
       $column.append($cell);
       $cell.append(gridArray[col][row]);
   }
  $grid.append($column)
};

$(document).on("click", function() {
    var columnselector = Math.floor((Math.random() * gridArray.length));
    // Random row selector
    var rowselector = Math.floor((Math.random() * gridArray[0].length));
    //hide random letter from 2D array
       //select random cell from column and addClass hidden


}

CSS

#grid {
    height: 100%;
    width: 100%;
    display: flex;
}
.cell {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hidden {
    opacity: 0;
}