css – Exactly how to choose and also include the shade to the chosen area of the food selection in a vibrant method when offering it a click in javascript

I attempt to make a food selection that includes the environment-friendly shade to the chosen one and also consequently deselects the others by including the white shade, that functions inside out and also the other way around, I currently attempted to set it however it does not appear to function well, can you inform me where my mistake is.

when clicking any one of the food selection areas, I desire it to choose the food selection area that I clicked and also repaint it environment-friendly and also deselect the others by repainting them white.

This capability should function inside out (from the House area to the around area of the food selection) and also from lower to leading (from the around area to the House of the food selection ), that is, in any kind of instructions that is clicked.

many thanks for your assistance

my resource code is this:

<< html lang=" en">
<> < head>>.
<< meta charset=" UTF-8">
<> < title>> Record<.
<< design>>.

<.
<.
<< body>>.

<< div course=" container">
<> < p course=" food selection">> House< < p course=" food selection">> Gallery< < p course=" food selection">> Modern technology< < p course=" food selection">> Details< < p course=" food selection">> Get in touch with< < p course=" food selection">> Regarding< .

<< manuscript>>.
allow food selection = document.querySelectorAll('. food selection');

menu.forEach(( btn, i) => > {
btn.addEventListener(" click", (ev) => > {
// console.log( ev.target);

// clicking inside out or from residence to around.

for( allow bt = 0; bt < < i; bt++) {
food selection[bt] style.background='#FFFFFF';
}

// missing out on make the problem, when residence is clicked, the choice or the environment-friendly shade ought to be gotten rid of, from the around food selection.

// ----------------------------------------------.

// clicking from base to leading or from ready to residence.
// it appears, it does not function, where is my error?


for( allow at = menu.length; at > > i; at--) {
food selection[i] style.background='#FFFFFF';
}

food selection[i] style.background='#BEFFC 7';
} );
} );

<.
<.
< "'.