jqueryでsubmitボタンが押されたフォームと同じフォーム内の値を拾いたい

Question

laravelで複数フォームでsubmitボタンが押されたフォームと同じフォーム内の値を拾いたいのですが、

<form method="POST" action="{{ route('cart.store') }}" class="form-inline m-1">
@csrf
　　<input type="hidden" id="product_id" name="product_id" value="1">
　　<button type="submit" class="btn btn-success">アイテム</button>
</form>

上記のフォムーがあと２つあった場合

<form method="POST" action="{{ route('cart.store') }}" class="form-inline m-1">
@csrf
　　<input type="hidden" id="product_id" name="product_id" value="2}">
　　<button type="submit" class="btn btn-success">アイテム</button>
</form>

<form method="POST" action="{{ route('cart.store') }}" class="form-inline m-1">
@csrf
　　<input type="hidden" id="product_id" name="product_id" value="3">
　　<button type="submit" class="btn btn-success">アイテム</button>
</form>

以下の場合では最初のフォームのidである1しか拾いません

        $('button[type=submit]').on('click', function () {
        var productId = $("#product_id").val();

productId　にそれぞれクリックされたフォーム内のproduct_idを代入するにはどのような指定の仕方になるのでしょうか？
よろしくお願い致します

Answer 1

同一HTML内で同一のidは仕様上使えないので、とりあえずクラスにでも書き換えて、こう書き換えてみてください。

$('form').on('submit', function () {
        var productId = $(this).find(".product_id").val();
});

Comments

[creative_09]

ありがとうございます。
無事にできました。