I want to simplify this javascript code. There are many children elements

I was trying to make this menu,

when clicked first item,
menu pic 1

when clicked second item,
menu pic 2

i have created styles for class 'on' in style sheet.

colorItems = document.querySelector('#color').children[1]

colorItems.children[0].addEventListener('click', () => {
    colorItems.children[0].classList.toggle('on')
    colorItems.children[1].classList.remove('on')
    colorItems.children[2].classList.remove('on')
    colorItems.children[3].classList.remove('on')
})
colorItems.children[1].addEventListener('click', () => {
    colorItems.children[0].classList.remove('on')
    colorItems.children[1].classList.toggle('on')
    colorItems.children[2].classList.remove('on')
    colorItems.children[3].classList.remove('on')
})
colorItems.children[2].addEventListener('click', () => {
    colorItems.children[0].classList.remove('on')
    colorItems.children[1].classList.remove('on')
    colorItems.children[2].classList.toggle('on')
    colorItems.children[3].classList.remove('on')
})
colorItems.children[3].addEventListener('click', () => {
    colorItems.children[0].classList.remove('on')
    colorItems.children[1].classList.remove('on')
    colorItems.children[2].classList.remove('on')
    colorItems.children[3].classList.toggle('on')
})

based on your code here is a solution:

#color as i see its your parent container and its has children lets assume they are buttons, you need to select the childrens using querySelectorAll and loop through them, whenever you click on a button you should add .on css class to the clicked button and remove this class from its siblings here is workable example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let colorItems = document.querySelectorAll('#color button');

colorItems.forEach(item => {
    item.addEventListener('click', ()=> {
        colorItems.forEach(i => i != item ? i.classList.remove('on') : i.classList.add('on'));
    });
});

<!-- language: lang-css -->

.on {
    background-color: yellow;
}

<!-- language: lang-html -->

<div id="color">
    <button>red</button>
    <button>blue</button>
    <button>white</button>
    <button>black</button>
</div>

<!-- end snippet -->