How to show data in modal of a specific id in laravel?

Question

I have all my products in view:welcome.blade.php and The problem is how can I show modal with the details of a specific id?

<!-- End Product MEnu -->
                <div class="row product__list">
                    @foreach($products as $product)
                    <!-- Start Single Product -->
                    <div class="col-md-3 single__pro col-lg-3 col-md-4 cat--1 col-sm-12">
                        <div class="product foo">
                            <div class="product__inner">
                                <div class="pro__thumb">
                                    <a href="#">
                                    <img src="{{ asset('storage/products/' . $product->image ) }}" width="270px" height="270px" alt="product images">
                                    </a>
                                </div>
                                <div class="product__hover__info">
                                    <ul class="product__action">
                                    <li><a id="{{ $product->id }}" data-toggle="modal" data-target="#productModal" title="Quick View" class="quick-view modal-view detail-link viewDetails" href="#"><span class="ti-plus"></span></a></li>
                                        <li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
                                    </ul>
                                </div>
                                <div class="add__to__wishlist">
                                    <a data-toggle="tooltip" title="Add To Wishlist" class="add-to-cart" href="wishlist.html"><span class="ti-heart"></span></a>
                                </div>
                            </div>
                            <div class="product__details">
                                <h2><a href="product-details.html">{{ $product->name }}</a></h2>
                                <ul class="product__price">
                                    {{-- <li class="old__price">$16.00</li> --}}
                                    <li class="new__price">₹ {{ $product->price }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Product -->
                    @endforeach

How can i show the details of a product in a modal?

Answer 1

Please Change Your data-target="#productModal{{ $product->id }}"

<div class="product__hover__info">
                                    <ul class="product__action">
                                    <li><a href="#" data-toggle="modal" data-target="#productModal{{ $product->id }}" title="Quick View" class="quick-view modal-view detail-link viewDetails" href="#"><span class="ti-plus"></span></a></li>
                                        <li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
                                    </ul>
                                </div>



 <div class="modal fade" id="productModal{{ $product->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                                </div>

                                                <div class="modal-body">
                                                    {{$product->id}}

                                                </div>


                                            </div>
                                        </div>
                                    </div>