How to select only one item from forEach loop and deselect others?

Question

I need to change element color onclick this element and onclick another element change color only that element

const postCategories = document.querySelectorAll('.post-cats-li');
const postCategoriesIcon = document.querySelectorAll('.post-cat-img');
const postCats = document.querySelectorAll('.post-cats');

postCategories.forEach(function(categories,index){
    categories.addEventListener('click',function(){
        postCategoriesIcon[index].style.filter = "grayscale(0%)";
    });
});

Answer 1

untested... this keeps a references to the selected elements style and its default value before changing anything

const postCategories = document.querySelectorAll('.post-cats-li')
const postCategoriesIcon = document.querySelectorAll('.post-cat-img')
const postCats = document.querySelectorAll('.post-cats')
let selected // [styleMap, "default filter value"]

postCategories.forEach(function (categories, index) {
  categories.addEventListener('click', function () {
    if (selected) {
      // reset filter if any is selected
      selected[0].filter = selected[1] 
    }
    // store the selected style and (default) filter before changing
    selected = postCategoriesIcon[index].style
    selected = [selected, selected.filter]
    // set style
    selected[0].filter = "grayscale(0%)"
  })
})

Normally you would have a selected class and style it with css and do something in lines of:

const postCategories = document.querySelectorAll('.post-cats-li')
const postCategoriesIcon = document.querySelectorAll('.post-cat-img')
const postCats = document.querySelectorAll('.post-cats')

postCategories.forEach(function (categories, index) {
  categories.addEventListener('click', function () {
    // remove the `selected` class from anywhere first
    postCategories.querySelectorAll('.selected').forEach(function (selected) {
      selected.classList.remove('selected')
    })
    // set the current element as selected
    postCategoriesIcon[index].classList.add('selected')
  })
})

Answer 2

Here is my way to do this )

const postCategories = document.querySelectorAll('.post-cats-li');
const postCategoriesIcon = document.querySelectorAll('.post-cat-img');
const postCats = document.querySelectorAll('.post-cats');

postCategories.forEach(function(categories,index){
    categories.addEventListener('click',function(){

        const postCatsLength = postCats.length;
        for (let i = 0; i < postCatsLength; i++) {
            if (!postCategoriesIcon[i].classList.contains('post-cat-img-select') && !postCats[i].classList.contains('post-cats-selected')) {
                postCategoriesIcon[index].classList.add('post-cat-img-selected');
                postCats[index].classList.add('post-cats-selected');
            }else{
                for(let i = 0; i < postCatsLength; i++){
                    postCategoriesIcon[i].classList.remove('post-cat-img-selected');
                    postCats[i].classList.remove('post-cats-selected');
                }
                postCategoriesIcon[index].classList.remove('post-cat-img-selected');
                postCats[index].classList.remove('post-cats-selected');
            }
        }


    });
});