[Laravel]ルーティングのパラメータが正確な値を渡さず困っています。

Question

環境
Laravel5.8
PHP7.2
Nigix

データベースからデータを取得し、forelseで一覧表示するプログラムを作っています。
一部分に特定のプロパティが存在するか否かで、URLと表示を変える分岐があります。$post->id、$post->liked_idをパラメータとしてルーティングに渡しています。(Twitterのいいね機能のようなものです）

@forelse($posts as $post)
      <div class="card">
        <div class="card-body">
          <div class="card-text">
            <a href="{{url('posts/'.$post->id)}}">{{$post->body}</a>
            <p>{{$post->updated_at}}</p>
          </div>
        </div>
        // 省略、以下問題のコード
              @auth
                @if(empty($post->liked_id))
                  <a href="{{url('posts/'.$post->id.'/likes')}}" class=""
                  onClick="event.preventDefault();
                  document.getElementById('like-store-form').submit();">
                    <i class="far fa-heart"></i>
                    {{$post->likes->count()}}
                  </a>
                  <form id="like-store-form" action="{{url('posts/'.$post->id.'/likes')}}" method="POST">
                    @csrf
                    @method('POST')
                  </form>
                @else
                  <a href="{{url('posts/'.$post->id.'/likes/'.$post->liked_id)}}" class=""
                    onClick="event.preventDefault();
                    document.getElementById('like-delete-form').submit();">
                    <i class="fa fa-heart"></i>
                    {{$post->likes->count()}}
                  </a>
                  <form id="like-delete-form" action="{{url('posts/'.$post->id.'/likes/'.$post->liked_id)}}" method="post">
                    @csrf
                    @method('DELETE')
                  </form>
                @endif
              @else
                  <i class="far fa-heart"></i>
                  {{$post->likes->count()}}
              @endauth
            </span>
          </div>
        </div>
      </div>
　　 //省略
    @endforelse
    {{$posts->links()}}

Route::post('/posts/{post_id}/likes','LikeController@store');
Route::delete('/posts/{post_id}/likes/{like_id}','LikeController@destroy');

しかし、ブラウザに表示されるURLは変化しているのに、ルーティングには本来のものとは違う値が渡されているようです。
具体的に言えば、どの投稿のURLにアクセスしても、ページの一番上の投稿のpost_idがパラメータとして渡されて処理が実行されているようです。

これは一体何が起きているのでしょうか。恥ずかしいことに検索ワードすらわからず、「ルーティング　違う値」などをググっても解決方法が出てきませんでした。よろしければアドバイスいただけると幸いです。

備考

・別のページ(forelseによる一覧表示を行わないページ）から同じURLにアクセスしたところ、正確なパラメータが渡され意図した通りの処理を実行しました。
・dd();でコントローラ内を確認してみたのですが、コントローラに引数として渡したときには、違うパラメータが渡されていました。

Answer 1

getElementByIdで常に一番最初のformが引かれてるのでは？

Answer 2

id重複しているためです。
画面内に同一IDは指定できません。
JavaScriptではIDを指定してsubmitしているので、「ページの一番上の投稿」が常に送信されているものと思われます。
IDをつけるなら個々のpost_idをつけるなど工夫が必要です。

それか、aタグではなくbuttonのsubmitにして<form>内に入れるとか（こちらのほうがスッキリすると思います）

Comments

[siophp]

回答ありがとうございます…buttonに直したところ意図通りに動きました。
別のページのコードをそのままコピペして不具合を生じさせていました。

[m.ts10806]

解決されたようで何よりです。
PHPからHTML出力してそれをJavaScriptで扱うとなると頭の中や机上で動作をさせるのは結構難しくなってくるので、
「PHPのコード」と「出力されたHTMLのコード」は全く切り分けて考えたほうがいいかもしれません。
つまり、phpで出力処理を組んだら、そのあとはブラウザから画面を確認するというよりも
「正しくHTMLが出力されたか」を「ソースを表示」で確認するようにするとか。

モックとかで静的HTMLを組んだうえでPHPで動的に出力する場合、
やはり「見てくれ」よりも「出力されたHTMLソース」を確認するのが適切な手段となります。

[siophp]

ありがとうございます…以後出力されたHTMLソースの確認も行います。