PHPforeachのループ文の中で、JS処理を毎回読み込ませる方法

前提・実現したいこと試したこと

現在laravelで掲示板アプリを作成しているLaravel初心者です。
掲示板を作成する中で、phpのforeachループとJSの処理を合わせて処理させる方法がわからないため、この場で質問をさせていただきたいです。

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

phpのforeachループで出力している投稿一覧に対してjsの処理を組み入れて、
コメントボタンを押すことによって、コメント入力欄とコメントのやりとり内容部分を表示非表示できるようにしようとしています。

しかし、　JS処理が1つ目の投稿に対してしか処理が行われず、1つ目の投稿のみコメントボタンで表示非表示可能な状態となっております。
どのようにすれば投稿すべてにコメントボタンによる開閉機能を実装することが可能でしょうか？

JS処理の読み込み場所が悪いのかと思い、あらゆる場所に置いてみて、試してみたのですが、どこにおいてもJS処理をすべての投稿に適応することができなさそうです。

ご存知の方いましたら、ご教示いただけると幸いです。

index.blade.php

@extends('layout')

@foreach ($posts as $post)

{{-- コメント入力欄とコメントのやりとり内容部分 --}}
<div id="p1">
{{-- 内容は省略 --}}
</div>

@endforeach



<script>
    //初期表示は非表示
    
    function clickBtn1(){
        const p1 = document.getElementById("p1");
    
        if(p1.style.display=="none"){
            // noneで非表示
            p1.style.display ="block";
        }else{
            // blockで表示
            p1.style.display ="block";
        }
    }
</script>

掲示板一覧画面(index.blade.php)イメージ画像コメント欄が閉じているver

掲示板一覧画面(index.blade.php
)イメージ画像コメント欄が開いているver




### 補足情報（FW/ツールのバージョンなど）
Laravel Framework 7.30.2

MySQL 8.0.21 Homebrew

PHP 7.4.14

Docker 19.03.13

Heroku 7.47.2

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

回答1件

ベストアンサー

同じidはページ内に複数存在してはいけません。（HTML構文エラーです）
どうしてもidを振りたいならループ内でカウント変数（Larabel bladeのループ内で使えるもの）で
重複しないものを出力するようにして下さい。

JSではaddEventlistenerで対象となる要素にonlickイベントを付与し、
クリックされた要素のid等を元にDOM操作します。

投稿2021/08/20 04:58

yuki84web

総合スコア1857

revoiot

2021/08/20 05:06

早速回答していただきありがとうございます。 >同じidはページ内に複数存在してはいけません。このルールは調べて知っていて、同じページに同じidが存在しないように注意していましたが、よく考えれば、ループ処理だと同じidが生成されることになるので、2回目のループでは重複するidに対してJS処理が行われれないということですね、、、長い時間わからず悩んでいてたので、本当に助かりました。ありがとうございます。