Object interaction - Help needed!

[qsrahman]

I am trying to make a simple game where random numbered squares are displayed and the player click on a square in sequence to make them disappear!. The problem is that if two or more squares overlap and the player click on the top most square all the squares beneath it disappear :(. Here is the test code:

let g = ga(480, 320, setup);
g.start();

function setup() {
    g.backgroundColor = "white";
    g.canvas.style.border = "1px black dashed";

    let numTiles = 10;

    for(let i = numTiles; i >= 1; i--) {
        let shape = g.rectangle(80, 80, 'lightgray', 'black', 1);
        shape.interactive = true;
        let numberText = g.text(i, "24px puzzler", "red");
        shape.addChild(numberText);
        shape.putCenter(numberText, -numberText.width, -numberText.height);

        shape.x = g.randomInt(0, g.canvas.width - shape.width);
        shape.y = g.randomInt(0, g.canvas.height - shape.height);

        shape.press = () => {
            shape.visible = false;
        }
    }

  g.state = play;  
}

function play() {
  console.log("play");
}

How to stop the lower squares from disappearing?