making mineSweeper JS/Jquery - assigning number of mines nearby edges wont read right

Question

Making mine sweeper in my own complicated way for a class project. when setting up my array of divs I'm checking the "non-bomb" divs if the ones nearby have a mine and count that number.

This is all i should include because my function for creating the game grid is huge.

each div which is a clickable square has an attribute of x and y the grid is 20 x 20 (0-19) X is vertical Y is horizontal - now that i say that I need to fix that for readability.

JS - after i create the grid checking nearby boxes

for (let i = 0; i < grid.length; i++) {

            const gridX = parseInt(grid[i].attr("x"))
            const gridY = parseInt(grid[i].attr("y"))
            const gridXx = grid[i].attr("x")
            const gridYy = grid[i].attr("y")
            const $topLeftEdge = $('div[y="0"][x="0"]')
            const $topRightEdge = $('div[y="19"][x="0"]')
            const $bottomLeftEdge = $('div[y="0"][x="19"]')
            const $topEdge = $(`div[x="0"][y=${gridYy}]`)
            const $bottomEdge = $(`div[x="19"][y=${gridYy}]`)
            const $rightEdge = $(`div[x=${gridXx}][y="0"]`)
            const $leftEdge = $(`div[x=${gridXx}][y="19"]`)

            const below = gridX + 1
            const above = gridX - 1
            const left = gridY - 1
            const right = gridY + 1
            let counter = 0

            if (grid[i].hasClass('clear')) {
               if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${below}][y=${gridY}]`).hasClass('bomb')) { // squares not on an edge -- Works perfect in first box but not second and other checkers are broken!?
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${above}][y=${gridY}]`).hasClass('bomb')) {
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${above}][y=${left}]`).hasClass('bomb')) {
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${above}][y=${right}]`).hasClass('bomb')) { // square up one right one
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${below}][y=${left}]`).hasClass('bomb')) {
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${below}][y=${right}]`).hasClass('bomb')) {
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${gridX}][y=${left}]`).hasClass('bomb')) {
                    counter++
                }
                if (!grid[i].is($leftEdge) && !grid[i].is($rightEdge) && !grid[i].is($topEdge) && !grid[i].is($bottomEdge) && $(`div[x=${gridX}][y=${right}]`).hasClass('bomb')) {
                    counter++
                }

                grid[i].attr('nearby', counter)

            }

this works flawless when i just create one game grid but the counter messes up when i make a player 2 div-- ignore its side quest rn

But this doesn't work and i should check my top and bottom edges because i think they aren't working right either. this will count the boxes with a bomb above and below but not diagonally or to the side?

if (grid[i].is($rightEdge) && (!grid[i].is($topEdge) || !grid[i].is($bottomEdge)) && $(`div[x=${gridX}][y=${gridX -1}]`).hasClass('bomb')) { // Right Edge work
                    counter++
                }
                if (grid[i].is($rightEdge) && (!grid[i].is($topEdge) || !grid[i].is($bottomEdge)) && $(`div[x=${above}][y=${left}]`).hasClass('bomb')) {
                    counter++
                }
                if (grid[i].is($rightEdge) && (!grid[i].is($topEdge) || !grid[i].is($bottomEdge)) && $(`div[x=${below}][y=${left}]`).hasClass('bomb')) {
                    counter++
                }
                if (grid[i].is($rightEdge) && (!grid[i].is($topEdge) || !grid[i].is($bottomEdge)) && $(`div[x=${above}][y=${gridY}]`).hasClass('bomb')) {
                    counter++
                }
                if (grid[i].is($rightEdge) && (!grid[i].is($topEdge) || !grid[i].is($bottomEdge)) && $(`div[x=${below}][y=${gridY}]`).hasClass('bomb')) {
                    counter++
                }