JavaScript - Change state, if cursor position is within xMin/xMax of Object.

Hi, 

I am trying to create a visual indicator for a table so that learners see in which collumn and row the cursor currently is.

I created an object for each collumn and row.
Now I am trying to change the state with JS, but it does not work.

What am I doing wrong here

const o1 = object('6nKnekJjyCF');
const o2 = object('6rTfKlrkffu');
const o3 = object('5YGRHUhpman');
const o4 = object('5oWNAuBFQS9');
const o5 = object('5es1edRLL5N');
const o6 = object('5Y0WLnqNi85');
const o7 = object('6XA7DdXsjXT');
const o8 = object('6G4nVLkSpzg');
const o9 = object('6MWHGvfKj1i');
const o10 = object('6eHgJLZFv0z');
const o11 = object('6NhKQJivvJo');
const o12 = object('6PJRLuwZZUT');
const o13 = object('6Riz75gsucC');
const o14 = object('6dNn7Zlc3Fe');
const o15 = object('67Lt13EAIeL');
const o16 = object('6hx6477vrWe');
const o17 = object('6MuvcaUW0kA');
const o18 = object('6JdTBlPMvEe');
const o19 = object('6mjaSU5mlJ2');
const o20 = object('6n9mjXnS3g8');
const o21 = object('5h7z2HMOD6H');
const o22 = object('6XHcmao1COC');
const s1 = object('6p0AmxXw14N');
const s2 = object('5zjVvVlYQ01');
const s3 = object('5qQxtId7Amz');
const s4 = object('6M17i9NeMrw');
const s5 = object('5WQ15Gpnyr0');
const s6 = object('6EcoeJeiIXR');
const s7 = object('5fAeoQpuuqH');
const s8 = object('6Xg7eVdOm39');
const s9 = object('6rB4fWk4rhs');
const s10 = object('5u84t7qJZPv');
const s11 = object('5XbluraXP9S');
const s12 = object('5vW4SJ9sAF9');
const s13 = object('5xmEI2CxN1T');
const s14 = object('65LKZEujAEJ');
const s15 = object('6G0ytVPJBH7');
const s16 = object('62sCo2NeQXG');
const s17 = object('5tKsUgZBybr');
const s18 = object('5dxwyNcYfnw');
const s19 = object('5alzmMapgWq');
const s20 = object('64ZsDMiiFeV');


function createObjectData(id) {
  const el = document.getElementById(id);
  const rect = el.getBoundingClientRect();
  return {
    el,
    id,
    xMin: rect.left,
    xMax: rect.right,
    yMin: rect.top,
    yMax: rect.bottom,
    state: "Normal"
  };
}

const objekteX = oIDs.map(createObjectData);
const objekteY = sIDs.map(createObjectData);


document.addEventListener("mousemove", (event) => {
  const x = event.clientX;
  const y = event.clientY;

  objekteX.forEach(obj => {
    const inside = x >= obj.xMin && x <= obj.xMax;
    if (inside && obj.state !== "Ein") {
      obj.state = "Ein";
      obj.el.style.outline = "2px solid green";
    } else if (!inside && obj.state !== "Normal") {
      obj.state = "Normal";
      obj.el.style.outline = "none";
    }
  });

  objekteY.forEach(obj => {
    const inside = y >= obj.yMin && y <= obj.yMax;
    if (inside && obj.state !== "Ein") {
      obj.state = "Ein";
      obj.el.style.outline = "2px solid blue";
    } else if (!inside && obj.state !== "Normal") {
      obj.state = "Normal";
      obj.el.style.outline = "none";
    }
  });
});