Portfolio images from b&w to color with filter button

I'm trying to make a portfolio with button filter to change images from b&w to original colours of the right category when click on button filter.

My images are correctly changed to b&w. For now I managed to make the button change to the active state when I click on it but it's not staying with the active state after the click and I can't manage to remove the b&w on the images of the button category.

I'm not sure if I have done the code snippet right as it display an error.

var container = document.getElementById('filters-button-group');    container.addEventListener('click', event => {      var activeItem = container.querySelector('.button-selected');      if (activeItem !== null) {      activeItem.classList.remove('button-selected');    }      if (event.target === activeItem) {      return;    }      event.target.classList.add('button-selected');    $('#img').css('filter', 'none');  });

button {    /* BUTTON SET UP */      border: 4px solid green;      border-top: 0;      border-right: 0;    font-size: 10px;    text-decoration: none;    color: green;    display: block;    margin-bottom: 22px;  }    .button:active,  .button-selected {    /* SELECTED */    background: rgba(8, 140, 126, 50%);    border: 4px solid green;  }    #portfolio { /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */      text-align: center;      background: transparent;      position: absolute;  }    #portfolio img {    /* --- IMAGES BLACK AND WHITE --- */    filter: grayscale(100%) opacity(30%);  }

<section id="portfolio">    <div class="button-group filters-button-group">      <button class="button button-effect" data-filter=".A"><a href="#" class="opc-main-bg filter" >A</a></button>    <button class="button button-effect" data-filter=".B"><a href="#" class="opc-main-bg filter" >B</a></button>    <button class="button button-effect" data-filter=".C"><a href="#" class="opc-main-bg filter" >C</a></button>    <button class="button button-selected" data-filter="*"><a href="#" class="selected opc-main-bg filter">ALL</a></button>    </div>    <div  <div class="A"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">    <div class="B"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">      <div class="C"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">        </section>

https://stackoverflow.com/questions/65502920/portfolio-images-from-bw-to-color-with-filter-button December 30, 2020 at 02:24PM