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

    dts.forEach(dt => {
        dt.addEventListener('click', ()=>{
            dt.parentNode.classList.toggle('appear');

           dts.forEach(el => { 
                if (dt !==el ){
                    el.parentNode.classList.remove('appear');
                } 

el は forEach の中の dt と同じ要素にもかかわらずなぜ dt と区別できるのでしょう？
dt はクリックされた dt タグ
el はクリックされていない状態というのが

  if (dt !==el )

で表現されているのでしょうか？