Cómo hacer que cada uno de mis divs realice la misma función, pero de forma individual?

Estoy haciendo un Esbozo Mágico. Actualmente tengo una cantidad fija de divisiones (divs). Cada una de ellas comparte una clase y un escuchador de eventos. He utilizado una función de bucle forEach para que todas sigan el mismo evento. Cuando hago clic en cualquiera de mis divisiones, todas se vuelven azules. Quiero que solo la división en la que hago clic se vuelva azul en lugar de todas al mismo tiempo. Aquí está mi código, ¿qué puedo hacer para que solo cambie el elemento en el que hago clic en lugar de que cambien todos los elementos?

function makeRows(rows, cols) {
  for (let i = 0; i < (rows * cols); i++) {
    let container = document.getElementById("container");
    let cell = document.createElement("div");
    cell.innerText = (i + 1);
    cell.setAttribute('id', 'box');
    container.appendChild(cell).className = "box";
  }
};

makeRows(16, 16);

// Eventos

document.querySelectorAll('.box').forEach(box => {
  box.setAttribute("style", "background-color: red;");
});

document.addEventListener('click', changeColor);

function changeColor() {
  document.querySelectorAll('.box').forEach(box => {
    box.setAttribute("style", "background-color: blue;");
  });
}