Getting all array items at once

Bellow is a very short code which sorts each span into a new array depending on the className it has.

What I currently have: As soon as a square of a specified class is hovered – IT GETS a color unique to its class.

What I needed to acheive: As soon as one of a specified class is hovered – ALL classList ITEMS GET the unique color of their class.

Can someone tell me what is wrong in the code bellow?
Thank you!

let allDivs = [...document.querySelectorAll(`div`)];
let Classes = [ "A0", "A1", "A2", "A3" ];

console.log(`let 'allDivs' equals:`);
console.log(allDivs);

for (let i = 0; i < Classes.length; i++) {
  let allDivsFiltered = allDivs.filter(item => (item.className.match(`A${i}`)));

  console.log('---- ---- ---- ----');
  console.log(`let 'allDivsFiltered [${i}]' equals:`);
  console.log(allDivsFiltered);

  // allDivsFiltered.classList.add(`B${i}`); // THIS DOESN'T WORK;

  for (let all of allDivsFiltered) {
    all.onmouseover = () => {
      all.classList.add(`B${i}`); // This does work,
      // but seperately on each one;

      // allDivsFiltered.classList.add(`B${i}`); // DOESN'T WORK HERE
        // AS WELL;
    };

    console.log(all);
  };
};
body {
  display: flex;
  flex-wrap: wrap;
}

div {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

.B0 {
  background-color: red;
}

.B1 {
  background-color: blue;
}

.B2 {
  background-color: green;
}

.B3 {
  background-color: yellow;
}
<div class="A0"></div>
<div class="A0"></div>
<div class="A0"></div>
<div class="A1"></div>
<div class="A1"></div>
<div class="A2"></div>
<div class="A2"></div>
<div class="A3"></div>
<div class="A3"></div>