ボタンをクリックしたとき、それに対応した要素のCSSを変更したい

###前提・実現したいこと
ボタンをクリックしたとき、それに対応した要素のCSSを変更したい

###該当のソースコード

HTML
1<form>
2<input type="submit" value="カゴへ" class="popup_btn" onclick="showBox()">
3<div class="popup" style="display:none;">
4　<div>商品を追加しました。</div>
5</div>
6</form>

###該当のソースコード

JavaScript
1var timerId;
2function showBox() {
3    var popup = document.getElementsByClassName("popup");
4    for(var i=0, l=popup.length; i<l; i++) {
5        popup[i].style.display="block";
6    }
7   timerId = setTimeout( closeBox , 3000 );
8}
9
10function closeBox() {
11    var popup = document.getElementsByClassName("popup");
12    for(var i=0, l=popup.length; i<l; i++) {
13        popup[i].style.display="none";
14    }
15}

###やりたいこと
「カゴへ」ボタンをクリックしたとき、ポップアップを表示させたいです。
foreachで上記のHTMLを複数出しているので、どこかのinputをクリックするとpopupクラスがついたdivが一斉に表示されてしまいます。
クリックされたinputと対応したポップアップを表示させたいのですが、どうすればよいでしょうか。

過去にあった同じような質問を拝見しましたが、思うようにいかず困っております。
何卒よろしくお願い致します。

――――追記――――
記述不足で申し訳ないです。
以下参考サイト様です。
https://www.nishishi.com/javascript-tips/temp-box-settimeout.html

karamarimo様
ご指摘通り、確かにタイムアウトの記述は必要ありませんでした。該当の記述を削除させていただきました。
ご指摘いただきありがとうございます。

kei344

2017/10/04 10:18

参考にされた記事のURLなども提示してはいかがでしょうか。

karamarimo

2017/10/04 10:23 編集

closeBoxはshowBoxだけから呼び出されるなら、clearTimeoutする必要はないのでは？

行動規範の内容に同意します

回答1件

ベストアンサー

ポップアップ要素が必ずinputの直後に存在する、と仮定すると、クリックされたinput要素でポップアップ要素をnextElementSiblingで取得できます。

DEMO

lang
1<form onsubmit="return false">
2  <input type="submit" value="カゴへ" class="popup_btn" onclick="showBox(event)">
3  <div class="popup" style="display:none;">
4    <div>商品を追加しました。</div>
5  </div>
6</form>
7
8<form onsubmit="return false">
9  <input type="submit" value="カゴへ" class="popup_btn" onclick="showBox(event)">
10  <div class="popup" style="display:none;">
11    <div>商品を追加しました。</div>
12  </div>
13</form>

lang
1function showBox(e) {
2  var popup = event.target.nextElementSibling;
3  popup.style.display = "block";
4  
5  setTimeout(function() {
6     popup.style.display = "none";
7  }, 3000);
8}