In my drawing app I have a function called addMouseOver. It adds an eventlistener to all squares so that when you mouseover them they turn black. The problem is that it works on the initial grid but I also have a resize button with multiple click event listeners that will remove the current grid items, adds new ones and then adds the mouseover function also. I'm not sure why the function is not working in the event listener.

    // Get grid container as variable, create grid item so we can add using for loop
let gridContainer = document.querySelector('.grid-container');
let clearButton = document.querySelector('.clear');
let resizeButton = document.querySelector('.resize');
let squaresPerSide = 16;

// Grid container is set up to divide whole page 16x16 for loop will add that amount of items
function createGrid(container, size) {
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  for (let i = 0; i < size * size; i++) {
    let gridItem = document.createElement('div');
    gridItem.classList.add('grid-item');
    container.appendChild(gridItem);
  }};

// Get grid item to change color when hovered over
// and change back when mouse isn't over
function addMouseOver(gridItems) {
  gridItems.forEach(item => 
    item.addEventListener('mouseover', () =>
    item.style.backgroundColor = 'black' ))
  };

// function to reset color of blocks when clear button clicked
//  has to work for all grid sizes

createGrid(gridContainer, squaresPerSide);
let allGridItems = document.querySelectorAll('.grid-item');
addMouseOver(allGridItems);

clearButton.addEventListener('click', () =>
  allGridItems.forEach(item =>
    item.style.backgroundColor = 'rgb(177, 229, 231)'));

// Function to prompt user to select amount of squares per side 
// when resize button is clicked, and change grid accordingly.

resizeButton.addEventListener('click', () => 
  allGridItems.forEach(item => item.remove()));
resizeButton.addEventListener('click', () =>
  squaresPerSide = parseInt(prompt('How many squares would you like per side?')))
resizeButton.addEventListener('click', () =>
  createGrid(gridContainer, squaresPerSide));
resizeButton.addEventListener('click', () =>
  addMouseOver(allGridItems));