Toggle image in Laravel view

I am working on an e-commerce project whereby I have two tables(Categories and Products). The 2 tables are interlinked using One to many relationship. One Category has many products. In the controller, I have created one variable where I have attached the images of a specific category, their prices, names and descriptions so as to display in view and its working fine.

In the view I have created a modal whereby I want on mouseover , all the images to toggle together with their corresponding names and prices. All the images toggle well but their corresponding names and prices don't toggle.. Please assist?

FrontController

     public function index(){
          
            $mobile = Category::find(1)->products()->whereNotNull("image")->whereNotNull("name")->whereNotNull("description")->whereNotNull("price")->get();
    
         return view('front.index')->withItems($mobile);
        }

front.blade.php

    <div class="col-md-4 agile_ecommerce_tab_left">
                                        
        <div class="hs-wrapper">
            @foreach($items as $item)
                <img src="{{ asset('images/'.$item->image) }}">
    
                <h5>
                    <a data-toggle="modal" data-target="#myModal">{{ $item->name}}</a>
                </h5>
    
                <p>
                    <i class="item_price"> Kshs.{{ $item->price}}</i>
                </p>
    
                <a href="{{ route('cart.edit' , $item->category_id) }}"> Add to Cart </a> 
    
            @endforeach
            <div class="w3_hs_bottom">
                <ul>
                    <li>
                        <a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                    </li>
                </ul>
            </div>
        </div>                  
    </div>