How to change the color of multiple divs using OnClick in JS?

Question

JavaScript

I have 4 divs, and I need to make it so that when I click on one, the color changes, and when I click on the other of these divs, the color of the first one becomes the same, and this one changes color.
That is, so that only one of these divs can change color, and not all at the same time.
And the task is to write a simple primitive code with the knowledge of a beginner.
This is my original code: The
HTML contains 4 divs with the class box
This is my CSS:

.box {
    width: 200px;
    height: 200px;
    background-color: black;
    transition: all .3s linear;
    display: inline-block;
}

And this is JS:

const elem = document.querySelector('.box');

elem.addEventListener ('click', () => {
    elem.style.backgroundColor = 'red';
})

Answer 1