Javascriptを使用してボタンを押したら入力欄が開くようにしたいです。

Question

実現したいこと

JavascriptとLaravelを使用して
ボタンを押したら入力欄が開くようにしたいです。
ただし、foreachで繰り返されているボタンを押したらその1つだけが入力欄が追加されてほしいです。
下に記述してあるソースコードで言いますと

<div class="wrap">にdisplay:none;をつけて非表示にしておき <button class="button">入力</button>をクリックしたら <div class="wrap">にdisplay:blockが付与され表示される、というようにしたいです。

前提

Laravel8

発生している問題・エラーメッセージ

ブラウザのコンソール画面にエラーも出ず
クリックしても何も起きない。

該当のソースコード

Laravelのindex.blade.php(簡略化してます。）

head内

<script src="{{ asset('/js/button.js') }}"></script>

body内
@foreach($tests as $test)
<div class="justify-end">
<button class="button">入力</button>
</div>
<div class="wrap">
<form action="{{ route('test')}}" method="post">
@csrf
<p>コメント</p>
<textarea name="comment"></textarea>
<div class="justify-end">
<button type="submit" >送信</button>
</div>
</form>
</div>
</div>
@endforeach

javascript内
$(function () {
var button = document.getElementsByClassName('button');
for (i = 0; i < button.length; i++) {
button[i].addEventListener("click", function () {
$(this).toggleClass('display');
});
}
});

試したこと

javascriptで
$(function() {
$(".button").click(function() {
$(".wrap").toggleClass("display");
});
});
と記述すると入力画面が出てきますが
class="wrap"全てに付与してしまうため
foreachで繰り返されているボタンどれをクリックしても全部に入力欄が増えてしまいます。

また
$(function () {
var button = document.getElementsByClassName('button');
for (i = 0; i < button.length; i++) {
button[i].addEventListener("click", function () {
$(this).next().toggleClass('display');
});
}
});

最後の$(this)ではbuttonがあるクラスに付与してしまっているのでは？と思い
next()にしてみましたが何も変わらず。。。

なぜエラーすら出ず実行されないのでしょうか？？

教えていただけますと幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

LaravelもPHPも直接は関係ないように思います。
blade度外視で静的htmlで動作確認されたほうが問題の切り分けもできます

[m.ts10806]

あと、コードはマークダウンでご提示を

Answer 1

直近の.wrapを探してみては？

$(function() {
  $(".button").click(function() {
    $(this).closest(".wrap").toggleClass("display");
  });
});

【.closest() | jQuery API Documentation】
https://api.jquery.com/closest/

【jQuery｢.parent() / .parents() / .closest()｣で親要素を取得する方法】
https://stand-4u.com/web/javascript/jquery-parent.html

Comments

[Misakichi]

アドバイスありがとうございます！
やってみたのですがコンソールにすら何も出ずでした・・・
そもそもがjQueryやjavascriptの発動の箇所がよくわかっていないかもしれないのでそのあたりも勉強してみます💦