Перенос данных продукта в модальное окно при нажатии на него

Question

При программировании макета (я только изучаю учебный проект) я столкнулся с проблемой. Необходимо, чтобы при нажатии на товар появлялось модальное окно с данными этого товара. Самостоятельно пытался зарегистрировать ссылку, в конце которой каждому элементу был присвоен идентификатор из базы данных:

<a href="<?php echo '/product'.$key['product_id']; ?>"></a>

и в маршрутах для регистрации контроллера и действия. Ошибки были следующие: -При нажатии на ссылку содержимое модального окна вместо желаемого содержимого (карточка товара) содержало копию самой исходной страницы. - Идентификатор товара при нажатии на другие товары переносился так же, как и первый нажатый товар, то есть он не менялся. Ссылка отображалась с нужным идентификатором, но другой параметр перешел к параметру товар, нажав на ссылку, которая открывает модальное окно:

 <div class="product-button-2">
       <a href="#" class="modal-view" data-fancybox data-toggle="modal" data-target="#productModal" title="Quickview"><i class="fa fa-search-plus"></i></a>
  </div>

Само модальное окно, которое должно содержать описание продукта, по которому щелкнули:

   <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
            <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">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-product">
                            <div class="product-images">
                                <div class="main-image images">
                                    <img alt="#" src="#"/>
                                </div>
                            </div><!-- .product-images -->

                            <div class="product-info">
                                <h1>Aenean eu tristique</h1>
                                <input type="hidden" id="item_id" value="ID товара">
                                ID товара: <span id="item_id_span"></span>
                                <div class="price-box-3">
                                    <hr />
                                    <div class="s-price-box">
                                        <span class="new-price">$160.00</span>
                                        <span class="old-price">$190.00</span>
                                    </div>
                                    <hr />
                                </div>
                                <a href="shop.html" class="see-all">See all features</a>
                                <div class="quick-add-to-cart">
                                    <form method="post" class="cart">
                                        <div class="numbers-row">
                                            <input type="number" id="french-hens" value="3">
                                        </div>
                                        <button class="single_add_to_cart_button" type="submit">Add to cart</button>
                                    </form>
                                </div>
                                <div class="quick-desc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero.
                                </div>
                                <div class="social-sharing">
                                    <div class="widget widget_socialsharing_widget">
                                        <h3 class="widget-title-modal">Share this product</h3>
                                        <ul class="social-icons">
                                            <li><a target="_blank" title="Facebook" href="#" class="facebook social-icon"><i class="fa fa-facebook"></i></a></li>
                                            <li><a target="_blank" title="Twitter" href="#" class="twitter social-icon"><i class="fa fa-twitter"></i></a></li>
                                            <li><a target="_blank" title="Pinterest" href="#" class="pinterest social-icon"><i class="fa fa-pinterest"></i></a></li>
                                            <li><a target="_blank" title="Google +" href="#" class="gplus social-icon"><i class="fa fa-google-plus"></i></a></li>
                                            <li><a target="_blank" title="LinkedIn" href="#" class="linkedin social-icon"><i class="fa fa-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .product-info -->
                        </div><!-- .modal-product -->
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>