クリックした要素の次の要素を取得して、クリックした要素にクラスを付与する

Question

前提・実現したいこと

以下のコードのように同じマークアップが３つ並んでいる状態（実際には１つの時もあるし、複数の時もある。とりあえずループで回す必要がある状態。）で、「.js--reply-tips」をクリックして隣の要素の「.a--reply-tips」を取得し、その要素に「.js--tips-open」のクラスを付与したいのですが、エラーも何も出ていないのにクラスが付与されません。

エラーの確認はデベロッパーツールで確認していますが何も出てきていません。
他の欲しい情報等があればできる範囲で追記していきます。

宜しくお願いします。

該当のソースコード

<div class="c--reply-tips">
	<button class="js--reply-tips"></button>
	<span class="a--reply-tips"></span>
</div>
<div class="c--reply-tips">
	<button class="js--reply-tips"></button>
	<span class="a--reply-tips"></span>
</div>
<div class="c--reply-tips">
	<button class="js--reply-tips"></button>
	<span class="a--reply-tips"></span>
</div>

const tipsButton = Array.from(document.getElementsByClassName("js--reply-tips"));
tipsButton.forEach(el => {
	el.addEventListener('click', () => {
		el.nextElementSibling.classList.add('js--tips-open');
	})
});

試したこと

console.logを使い、「el」や「el.nextElementSibling」を取得していますが正常に取得できています。

Comments

[hatena19]

サンプル作成して確認してみましたが、正常に動作しているようです。

https://codepen.io/hatena19/pen/LYxdBJr

[aguu0101]

ご確認いただきありがとうございます！
上記のコードが書いてあるjsファイルに他の処理のコードも書いているのですが、上記のコード以外を消してみたところ正常に動きました。

おそらく消したコードのどこかに問題がありそうなのでこれに関しては一旦自己解決とさせていただきます！
何がダメなのか今から検証していきますのでもし有用そうであれば追記で解決した方法を書いていきます！

Answer 1

元のソースでとくに問題なさそうですが、別案

document.addEventListener('click', (e) => {
  var t=e.target.closest('.js--reply-tips');
  if(t){
    t.nextElementSibling.classList.add('js--tips-open');
  }
});

Comments

[aguu0101]

ご確認いただきありがとうございます。
いただいたコードでもダメでした。。

ただ、僕が書いたコードが書いてあるjsファイルに他の処理のコードも書いているのですが、上記のコード以外を消してみたところ正常に動きました。

おそらく消したコードのどこかに問題がありそうなのでこれに関しては一旦自己解決とさせていただきます！
せっかく考えていただいたのに恐縮ですが、もし解決した内容が有用そうであれば追記で記載させていただきます！