foreachで処理しているlimit文章にマウスオーバーすると全表示できるようにしたい

Question

前提・実現したいこと

Laravel Framework 8.61.0にてお問い合わせ一覧を作成しています。
foreachで処理している文章をlimitで25文字以上になると(...)にしているのでjavascriptを使ってマウスオーバーした際に文章を全表示させたいです。

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

ページには4行ずつお問い合わせ内容を表示しているのですが現状だと1行目だけしか処理が実行されないので4行すべてに処理を実行できるようにしたい。

該当のソースコード

management.blade.php

<tbody>
            @foreach ($items as $item)
            <tr>
                <td>{{$item->id}}</td>
                <td>{{$item->name}}</td>
                <td>@if($item->gender==1) 男性 @else 女性 @endif</td>
                <td>{{$item->email}}</td>
                <td id="ex_out">{{Str::limit($item->opition,25)}}</td>
                <td id="ex_menu" style="display:none">{{$item->opition}}</td>
                <td>
                    <form action="{{ route('delete', ['id' => $item->id]) }}" method="post">
                        @csrf
                        <button class="button-delete btn-dark" style="border-radius:5px">削除</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>

javascript

<script type="text/javascript">
    document.getElementById("ex_out").addEventListener("mouseover", function() {
        document.getElementById("ex_menu").style.display = 'block';
    }, false);

    document.getElementById("ex_out").addEventListener("mouseout", function() {
        document.getElementById("ex_menu").style.display = 'none';
    }, false);
</script>

試したこと

            <td id="ex_out">{{Str::limit($item->opition,25)}}</td>
            <td id="ex_menu" style="display:none">{{$item->opition}}</td>

それぞれidの部分に{{$item->id}}と記述してみましたがこれに変更すると4行目しか処理が実行されない。

Comments

[m.ts10806]

コードはマークダウンのcodeにてご提示ください。
あと、Laravelですかね。質問タグ追加してください。

[TAKU9]

上記修正しました。
失礼いたしました。

Answer 1

4行目しか処理が実行されない。

ID重複しているからだと思います。
「ID」とその名の通り、要素を特定できなければなりません（つまり構文上NGです）。
JavaScriptは特にその影響を受けます。
同名クラスを振り、「その隣接の」と風にしてみてはどうでしょう。

Comments

[TAKU9]

参考にさせていただきました。
ありがとうございました。

[m.ts10806]

結局どのように解決とされたのでしょう。
https://teratail.com/help/question-tips#questionTips4-2