вызов функции javascript вне цикла foreach

Question

У меня проблема с моей функцией JavaScript, когда я помещаю свой сценарий в цикл foreach, как у меня, например, код ниже, все работает нормально, но я думаю, что это должно быть снаружи, поэтому любой может дать мне совет, чтобы решить эту проблему, я ценюэто

@foreach($messages->reverse() as $message )
    <ul class="id{{$message->id}}" data-id="{{$message->id}}">
        <li class="message">
            <div class="text {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                {{$message->text}}
            </div><br>
        </li>
        <li class="message">
            <div class="time {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                <div style="display: flex; flex-wrap: nowrap;">
                @if($message->to!=Auth::user()->id)
                    <div style="display: table">
                        <a onclick="togglediv('item{{ $message->id }}')" class="toggle{{$message->id}} hidden" style=" text-decoration: none; margin-right: 5px; cursor: pointer" > <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span></a>
                        <div id="item{{ $message->id }}" style="display:none;"><button value="{{$message->id}}" class="btn-remove" >remove</button></div>
                    </div>
                @endif
                    {{ \Carbon\Carbon::parse($message->created_at)->format('M d, h:i')}}
                </div>
            </div>
        </li>
    </ul>
    <script>
        $('.id{{ $message->id }}').hover(function(){
            $('.toggle{{ $message->id }}').toggleClass('hidden');
        });
    </script>
@endforeach

Answer 1

Выберите <ul> с классом id и получите атрибут данных текущего наведенного элемента и скройте соответствующий класс переключения.

@foreach($messages->reverse() as $message )
    <ul class="id" data-id="{{$message->id}}">
        <li class="message">
            <div class="text {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                {{$message->text}}
            </div><br>
        </li>
        <li class="message">
            <div class="time {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                <div style="display: flex; flex-wrap: nowrap;">
                @if($message->to!=Auth::user()->id)
                    <div style="display: table">
                        <a onclick="togglediv('item{{ $message->id }}')" class="toggle{{$message->id}} hidden" style=" text-decoration: none; margin-right: 5px; cursor: pointer" > <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span></a>
                        <div id="item{{ $message->id }}" style="display:none;"><button value="{{$message->id}}" class="btn-remove" >remove</button></div>
                    </div>
                @endif
                    {{ \Carbon\Carbon::parse($message->created_at)->format('M d, h:i')}}
                </div>
            </div>
        </li>
    </ul>
@endforeach
<script>
    $(document).ready(function () {
        $('.id').hover(function(){
            let id = $(this).attr('data-id');
            $('.toggle' + id).toggleClass('hidden');
        }, function () {
            let id = $(this).attr('data-id');
            $('.toggle' + id).toggleClass('hidden');
        });
    });
</script>