this is a codepen live demo at here.

1)Click on the gird to add first red point

2)Click on the gird to add second red point

3)Click back on the first red point

Problem: You will see that the coordinates will change or detected as you click the first and second. However, when you click back the the first point, the coordinates is not detected and perhaps because its overlay. May I ask if there is a solution for this and show a demo:)

Example here

.red-dot {
  position:absolute; 
  width:15px; 
  height:15px;
  background:red;
}

CodePudding user response：

in order to make it work you can add pointer-events: none; to your CSS.

so it'll look like this:

.red-dot {
  position:absolute; 
  width:15px; 
  height:15px;
  background:red;
  pointer-events: none;
}

this way the click will be ignored and applied on the grid it self instead of the red square element