特定のデータ属性をクリックしたときに、特定のデータ属性以外のクラスを削除したい

Question

[data-trigger]をクリックしたときに、データの値とマッチするものだけにクラスを付けたいのですが、クリックしたデータ属性の値とマッチするもの以外のデータ属性のクラスは全て削除(リセット)したいのですが、どのように記述すれば良いでしょうか?
一応クラスは付与することはできたのですが、データ属性の値とマッチするもの以外のデータ属性のクラスは全て削除する箇所がうまくいかないです。

例としてはハンバーガメニューをクリックして、activeがついてメニューが開くとします。
そのまま開いた状態で検索メニューを押した際に、ハンバーガメニューは閉じて欲しいので、activeを取り除きたいです。

//ハンバーガメニュー
<div data-trigger="burger">
</div>
<nav data-target="burger">
</nav>
//検索メニュー
<div data-trigger="search">
</div>
<nav data-target="search">
</nav>

export const useTrigger = () => {
  const targets = document.querySelectorAll('[data-trigger]');
  targets.forEach((target)=>{
    target.addEventListener("click", (event) => {
      const targetElement = event.target;
      const addClassTarget = document.querySelector(
        `[data-target = ${ targetElement .getAttribute("data-trigger")}]`
      );
      console.log(addClassTarget);
      !addClassTarget.classList.remove('active')
      if (!addClassTarget) return;
      if (addClassTarget.classList.contains("active")) addClassTarget.classList.remove("active");
      else addClassTarget.classList.add('active');
    })
  })
}

下記の箇所が間違ってるとは思いますが、どう書き換えたらいいのか不明なので、ご教授いただきたいです。

!addClassTarget.classList.remove('active')

Answer 1

やり方は色々あると思いますが、クリックした要素だけでは今どの[data-target]要素にactiveがついているかわからないので、
activeを足す前にいったん全部の[data-target]についているactiveを削除するのはどうでしょうか

https://jsfiddle.net/ofv1hyr2/