Why isn't classList.toggle not working properly?

Question

I'm trying to toggle my classes when I click the image. So, basically what I'm trying to do is that when I click the image, my styles apply to the image but when I again click the image, the style doesn't toggle or remove. If it successfully runs, the desired output I want is that if I click on an image my styles apply and when again I click on the image styles remove, and if I click the different image I also want to remove styles from the previous image as well.

HTMl for Reference

<div class="custom-row web-align-center web-gap-10 ">
   <div class="item-img pos-relative">
      <img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
         <div class="tick">
           <img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
         </div>
  </div>
   <div class="item-img pos-relative">
      <img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
         <div class="tick">
           <img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
         </div>
  </div>
  <div class="item-img pos-relative">
      <img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
         <div class="tick">
           <img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
         </div>
 </div>

CSS for Reference

.item-img {
background-color: var(--background-color-1);
width: 100%;
max-width: 144px;
min-height: 144px;
display: flex;
flex: 1 1 144px;
justify-content: center;
}

.item-img.active {
box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8.5px #2271b1;
outline: 1px solid #fff;
}

.tick {
width: 25px;
height: 25px;
padding: 4px;
background-color: #2271b1;
position: absolute;
top: 0;
right: 0;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #2271b1;
display: none;
cursor: pointer;
}

.tick.active {
display: block;
}

JS for Reference

const fImg = document.querySelector(".feature-img"),
popUp = document.querySelector(".overlay-img"),
cross = document.querySelector(".cross-icon"),
imgArea = document.querySelector(".img-area"),
imgItem = document.querySelectorAll(".item-img"),
tick = document.querySelectorAll(".tick"),
mediaSidebar = document.querySelector(".media-sidebar");

fImg.addEventListener("click", () => {
popUp.classList.add("active");
});

cross.addEventListener("click", () => {
popUp.classList.remove("active");
});
imgItem.forEach((el, index) => {
el.addEventListener("click", () => {
    mediaSidebar.classList.add("active");
    imgItem.forEach((el) => {
        el.classList.remove("active");
    });
    tick.forEach((et) => {
        et.classList.remove("active");
    });
    imgItem[index].classList.toggle("active");
    tick[index].classList.toggle("active");
  });
 });

Output Image

Answer 1

Your class doesn't remove because you remove it with following code

imgItem.forEach((el) => {
    el.classList.remove("active");
});

and then toggle (add) active class again

You can fix it by not removing class for element that was clicked

imgItem.forEach((el, i) => {
    if (index !== i) {
       el.classList.remove("active");
    }
});

try working example below

 const imgItem = document.querySelectorAll('.image'); imgItem.forEach((el, index) => { el.addEventListener("click", () => { //mediaSidebar.classList.add("active"); imgItem.forEach((el, i) => { if (index.== i) { el.classList;remove("active"); } }). /*tick.forEach((et) => { et.classList;remove("active"); }).*/ imgItem[index].classList;toggle("active"). //tick[index].classList;toggle("active"); }); });

 .image { width: 50px; height: 50px; }.image.active { border: 2px solid red; }

 <img class="image" src="#" alt="image1"/> <img class="image" src="#" alt="image2"/> <img class="image" src="#" alt="image3"/>