You have to store the active state of the clicked element before removing the active class from all the elements. Then, you can set the active state of the clicked element to the opposite of what it was.

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function() {
    // Get the active state of the clicked element
    let active = this.classList.contains("active");
    items.forEach(el => el.classList.remove('active'));
    // Toggle the active state of the clicked element
    if(active){
      this.classList.remove("active");
    } else {
      this.classList.add("active");    
    }
  })
});

.list {
  margin: 100px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 700px;
}

.item {
  width: 100px;
  aspect-ratio: 1;
  background-color: blueviolet;
}

.active {
  background-color: brown;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

You don't have to loop through all elements every time. You can just look up the currently active element. This should work:

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function(){
    // Check if clicked element is active
    if (this.classList.contains("active")){
      // Element was active, deactivate and terminate
      this.classList.remove("active");
      return;
    }
    // Element clicked was not active
    // Find active element in list and deactivate, if any
    var activeElement = document.querySelector(".list .active");
    if (activeElement != null) activeElement.classList.remove("active");
    this.classList.add("active");
  })
});

See live demo.