お世話になっております。

試しに、dt とdd を囲うdiv を付けずに実行してみたところ、開閉がうまくいきませんでした。

該当部分のHTMLは

<dl>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</dl>

該当部分のCSSは

dd {
  display: none;
}

dd.appear {
  display: block;
}

JavaScriptは下記です。

const dts = document.querySelectorAll('dt');
const dds = document.querySelectorAll('dd');

dts.forEach((dt, index) => {
  dt.addEventListener('click', () => {
    dds.forEach(dd => {
      dd.classList.remove('appear');
    })
    dds[index].classList.add('appear');
  })
})

です。

JavaScriptの流れから考えると、

const dts = document.querySelectorAll('dt');
const dds = document.querySelectorAll('dd');

dts.forEach((dt, index) => {
  dt.addEventListener('click', () => {   // (1) dtをクリックしたら
    dds.forEach(dd => {                 // (2) 全てのddのappearを削除して
      dd.classList.remove('appear');
    })
    dds[index].classList.toggle('appear');   // (3) 該当のddにappearを付ける
  })
})

だと思うのですが、なぜ、(2)が適用されないのか、別のdtをクリックした時、ddにappearがついたままになってしまう流れが分かりません。

お手数ですが、宜しくお願い致します。