Bonjour je développe un site sous Symfony et j'ai trouver un superbe beau Template d'une boutique et dans le Template j'ai un model pour voir l'aperçu d'un produit mais lorsque je clique sur l’aperçu il m'affiche que le premier produit mais j'aimerai savoir comment faire pour qu'il m'affiche le produit au quel appartiens l'aperçu cordialement je vous montre le code merci de voter aide ça serai sympa si vous avez une solution !

ma fênetre modal : 

{% for productView in productViews %}
<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
    <div class="overlay-modal1 js-hide-modal1"></div>

    <div class="container">
        <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
            <button class="how-pos3 hov3 trans-04 js-hide-modal1">
                <img src="{{ asset('images/icons/icon-close.png') }}" alt="CLOSE">
            </button>

            <div class="row">
                <div class="col-md-6 col-lg-7 p-b-30">
                    <div class="p-l-25 p-r-30 p-lr-0-lg">
                        <div class="wrap-slick3 flex-sb flex-w">
                            <div class="wrap-slick3-dots"></div>
                            <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

                            <div class="slick3 gallery-lb">
                                <div class="item-slick3" data-thumb="{{ asset('images/products/'~productView.imageName) }}">
                                    <div class="wrap-pic-w pos-relative">
                                        <img src="{{ asset('images/products/'~productView.imageName) }}" alt="IMG-PRODUCT">

                                        <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{{ asset('images/products/'~productView.imageName) }}">
                                            <i class="fa fa-expand"></i>
                                        </a>
                                    </div>
                                </div>


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

                <div class="col-md-6 col-lg-5 p-b-30">
                    <div class="p-r-50 p-t-5 p-lr-0-lg">
                        <h4 class="mtext-105 cl2 js-name-detail p-b-14">
                            {{ productView.name }}
                        </h4>

                        <span class="mtext-106 cl2">
								 {{ productView.name }}&euro;
							</span>

                        <p class="stext-102 cl3 p-t-23">
                            {{ productView.description | truncate('50') }}
                        </p>

                        <!--  -->
                        <div class="p-t-33">

                            <div class="flex-w flex-r-m p-b-10">
                                <div class="size-204 flex-w flex-m respon6-next">
                                    <div class="wrap-num-product flex-w m-r-20 m-tb-10">
                                        <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
                                            <i class="fs-16 zmdi zmdi-minus"></i>
                                        </div>

                                        <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product" value="1">

                                        <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
                                            <i class="fs-16 zmdi zmdi-plus"></i>
                                        </div>
                                    </div>

                                    <button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">
                                        Ajouter au panier
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

et ma boucle ou il y a les produit : 

            {% for product in pagination %}
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item {{ product.category }}">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="{{ asset('images/products/'~product.imageName) }}" alt="{{ product.imageName }}" height="390" width="315">
                            <a href="#" class="block2-btn flex-c-m stext-103 cl3 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Voir un apperçu
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="{{ path('show-product-front', {id: product.id}) }}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    {{ product.name }}
                                </a>

                                <span class="stext-105 cl3">
									{{ product.price }}€
								</span>
                            </div>

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

        {% endfor %}

je crois le model ce reconnais grâce a cette classe : "js-show-modal1"

mais comment la rendre dynamique ? pour qu'il m'affiche l'aperçu de chaque produit merci de votre aide et bonne soirée !