title: Popover modal (quick view) for selected item in array list - Twig, Symfony
body: <p>Please i have array list of product that displays in twig. I will like to display a popover modal view(quick view) for each product. for example when i click on quick view for item 1, i want the information for item 1 to display on the modal popover view. Thanks</p>
  
  <pre><code>{% extends "::base.html.twig" %}
  
  {% block body %}
  
  
  &lt;header class="page-heading"&gt;
      &lt;div class="container"&gt;
  
          &lt;h2&gt;Collection&lt;/h2&gt;
      &lt;/div&gt;
  
  &lt;/header&gt;
  
  &lt;section class="new-arrivals"&gt;
      &lt;div class="container text-center"&gt;
          &lt;div class="items"&gt;
              &lt;div class="row"&gt;
  
                  {% for entry in product %}
  
  
                      &lt;div class="col-sm-4 item"&gt;
                          &lt;div class="item-image"&gt;
                              &lt;img src="{{ asset('product/'~ entry.imageName )  }}" alt="shirt"&gt;
  
                              &lt;div class="hover-overlay"&gt;
                                  &lt;ul class="list-unstyled list-inline"&gt;
                                      &lt;li&gt;&lt;a class="expand" data-toggle="modal" data-target="#product_view"&gt;&lt;i class="icon-expand"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;div class="item-info"&gt;
                              &lt;h5&gt;{{ entry.name }}&lt;/h5&gt;
                              &lt;ul class="price list-unstyled list-inline"&gt;
                                  &lt;li class="current"&gt;{{ entry.price  }}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="modal fade" id="product_view"&gt;
                          &lt;div class="modal-dialog"&gt;
                              &lt;div class="modal-content"&gt;
                                  &lt;div class="modal-header"&gt;
                                      &lt;a href="#" data-dismiss="modal" class="class pull-right"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
                                      &lt;h3 class="modal-title"&gt;{{ entry.name }}&lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div class="modal-body"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;div class="col-md-6 product_img"&gt;
                                              &lt;img src="{{ asset('product/'~ entry.imageName )  }}" class="img-responsive"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-md-6 product_content"&gt;
                                              &lt;h4&gt;Product Id: &lt;span&gt;51526&lt;/span&gt;&lt;/h4&gt;
                                              &lt;div class="rating"&gt;
                                                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                                                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                                                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                                                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                                                  &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                                                  (10 reviews)
                                              &lt;/div&gt;
                                              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/p&gt;
                                              &lt;h3 class="cost"&gt;&lt;span class="glyphicon glyphicon-usd"&gt;&lt;/span&gt; 75.00 &lt;small class="pre-cost"&gt;&lt;span class="glyphicon glyphicon-usd"&gt;&lt;/span&gt; 60.00&lt;/small&gt;&lt;/h3&gt;
                                              &lt;div class="row"&gt;
                                                  &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                                                      &lt;select class="form-control" name="select"&gt;
                                                          &lt;option value="" selected=""&gt;Color&lt;/option&gt;
                                                          &lt;option value="black"&gt;Black&lt;/option&gt;
                                                          &lt;option value="white"&gt;White&lt;/option&gt;
                                                          &lt;option value="gold"&gt;Gold&lt;/option&gt;
                                                          &lt;option value="rose gold"&gt;Rose Gold&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;!-- end col --&gt;
                                                  &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                                                      &lt;select class="form-control" name="select"&gt;
                                                          &lt;option value=""&gt;Capacity&lt;/option&gt;
                                                          &lt;option value=""&gt;16GB&lt;/option&gt;
                                                          &lt;option value=""&gt;32GB&lt;/option&gt;
                                                          &lt;option value=""&gt;64GB&lt;/option&gt;
                                                          &lt;option value=""&gt;128GB&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;!-- end col --&gt;
                                                  &lt;div class="col-md-4 col-sm-12"&gt;
                                                      &lt;select class="form-control" name="select"&gt;
                                                          &lt;option value="" selected=""&gt;QTY&lt;/option&gt;
                                                          &lt;option value=""&gt;1&lt;/option&gt;
                                                          &lt;option value=""&gt;2&lt;/option&gt;
                                                          &lt;option value=""&gt;3&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;!-- end col --&gt;
                                              &lt;/div&gt;
                                              &lt;div class="space-ten"&gt;&lt;/div&gt;
                                              &lt;div class="btn-ground"&gt;
                                                  &lt;button type="button" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;/span&gt; Add To Cart&lt;/button&gt;
                                                  &lt;button type="button" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add To Wishlist&lt;/button&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
  
  
  
  
                  {% endfor %}
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  
  
  
  {% endblock %}
  </code></pre>
  
  <p>the div class "div class="modal fade" id="product_view""is the one that serves the popover.</p>