Selecting the last element in a table

Question

I'm creating a small game where I create a table of squares, and the first one to click the bottom left piece loses.

I'm having an issue regarding editing the bottom left [point: (1,1)] square in my program. My objective is to have a green colored square, labeled #poison in my .CSS

    #poison {
   width: 5em;
   height: 5em;
   padding: 0;
   background-size: 5em 5em;
   background-image: url("http://imgur.com/6Apk8Rk");
   }

appear instead of the regular brown colored squares I am outputting currently.

I'm unsure how to replace the bottom left square with the #poison square.

Here is the JS function I use to create the table.

function makeTable(x, y) {
    var gameTable = document.getElementById('gameTable'),
    poison = document.getElementById('poison');

    gameTable.innerHTML = null;
    var table = [];
    //creates rows
    for (let i = 0; i < x; i += 1) {
        var row = document.createElement('tr');
       //appends each row to the table
       gameTable.appendChild(row);
       //store the amount of iterations in array trow
       var tRow = [];
        table[i] = tRow;
        //create columns (cells)
        for (let j = 0; j < y; j += 1) {
            let cell = document.createElement('td'); //td defines a cell
            //set x,y coordinates
            cell.pos = { x: i, y: j };
            //stores table values into cell
            table[i][j] = cell;

           //if you click the bottom left piece of chocolate..
           if (i === x - 1 && j === 0) {
              cell.onclick = function() {
              //..restart the game
              restartGame(); 
              }
             //else, behave normally
            } else {
            cell.onclick = function() {
            cellClick(cell); 
            }
            }
            //append cells to the table
            row.appendChild(cell);
        }
    }
}

Here is relevant HTML by request:

    <fieldset id="RowColbox">

 <label>
   <span>Rows:</span>
   <input name="Cols" id="cols" type="number" value="3"/>
 </label>

   <label>
   <span>Columns:</span>
   <input name="Rows" id="rows" type="number" value="4"/>
   </label>



   <button id="addDimensions" type="button">create</button>
</fieldset>


<table id="gameTable"> 

</table>

Here is my code in it's entirety.

Answer 1

Assuming that your code is not completed yet, here's a way you can assign id "poison" to a specific cell (ex: {x:1, y:1} ):

//set x,y coordinates
cell.pos = { x: i, y: j };
if(cell.pos.x === 1 && cell.pos.y === 1){
    cell.id = "poison";
}

Answer 2

Here is a way to add "poison" to bottom left column

if(cell.pos.x === (x-1) && cell.pos.y === 0){
    cell.id = "poison";
}