How to get clicks from multiple same buttons on diferent divs?

Question

This code generates x amount of divs and x amount of buttons in them

    for(var i = 0; i < h; i++){
        var div = document.createElement("div");
        div.id = i.toString();
        div.style.position = "absolute";
        div.style.top = ((i * 10).toString() + "px");
        lab.push([]);
        document.body.appendChild(div);
    }

    for(var i = 0; i < w * h; i++){
        console.log(i, Math.floor(i / w));
        var but = document.createElement("button");
        but.id = ("b" + i.toString());
        but.style.width = "10px";
        but.style.height = "10px";
        but.style.borderStyle = "solid";
        but.style.borderColor = "black";
        but.style.borderRadius = "0px";
        but.style.backgroundColor = "white";

        lab[Math.floor(i / w)].push("0");
        
        document.getElementById((Math.floor(i / w)).toString()).appendChild(but);
    }

But when I generate for examle 10 divs and and 20 buttons inside of each, this code works only on the last div:

  for (i = 0; i < w * h; i++) {
      document.getElementById(("b" + i.toString())).onmouseover = function() {
        console.log(this);
      }
  }

So when I go with mouse on top of the last div's buttons, I get messages to console but that doesn't work on the other divs. How do I get this to work on all of them and not just the buttons from last div?

Answer 1

You can use a common class name for each blocks. You can use custom attributes for each div (if needed) And then you can try with this code.

  jQuery(document).on('mouseover','.commonClassName',(e)=>{ 
       //write your code here
  });