для цикла — динамический модальный php

Я пытаюсь создать модальный, который является динамическим и предварительно заполняется деталями элемента, на который нажимают. Вот мой код:

HTML:

{foreach from=$flowers3 item=row}

{foreach from=$row item=item}

<div class="item col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="product">
<div class="image">
<div class="quickview">

<a alt="Quick View" class="btn btn-xs  btn-quickview" data-target="#modal" data-toggle="modal"> View </a>
</div>

<a href="#">
<img class="item_thumb img-responsive" src="img/{$item.im}" alt="img">
</a>
</div>
<div class="description">
<h4 class="item_name">{$item.title}</h4>

<p class="item_price">
small&nbsp;
<input type="Radio" name="product" value="{$item.id}s" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.ps|money:0}</span>&nbsp;|&nbsp; med&nbsp;

<input type="Radio" name="product" value="{$item.id}m" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.pm|money:0}</span>&nbsp;|&nbsp; lg&nbsp;

<input type="Radio" name="product" value="{$item.id}l" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.pl|money:0}</span>
</p>
</div>

<div class="action-control">
<a href="javascript:;" onClick="mySubmit()">
<span class="button-fill grey">
<i class="glyphicon glyphicon-shopping-cart">
</i> Add to cart </span>
</a>
</div>
</div>
</div>
{/foreach}
{/foreach}

Вот PHP:

<?php
$GLOBALS['flowers']=getFlowers();

function &getFlowers(){
static $flowers;
if(!isset($flowers)){
$flowers=array(
'1'=>array('im'=>'store-a1.jpg','title'=>'CocoChanel','description'=>' Fashion fades.'),
'2'=>array('im'=>'store-a2.jpg','title'=>'The Royal Jewels','description'=>'Fit for any Queen.'),);}

$i=1;
foreach($flowers as $k=>&$v){
$v['id']=$k;
$v['num']=$i++;}
return $flowers;}
?>

И вот модальное:

            <!--modal -->

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button"> ×</button>
<div class="col-lg-5 col-md-5 col-sm-5  col-xs-12">
<!-- product Image -->
<div class="main-image  col-lg-12 no-padding style3 modal-image">
<a class="product-largeimg-link" href="#">
<img src="img/{$item.imb}" class="img-responsive product-largeimg" alt="img">
</a>
</div>
<!--/image-->
</div>
</div>
<!--/ product Image-->
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 modal-details no-padding">
<div class="modal-details-inner">
<h1 class="product-title">{$item.title}</h1>

<div class="details-description">
<p>{$item.description}</p>
</div>

<div class="clear"></div>
</div>
</div>
</div>
</div>

<!--/modal -->

Когда я добавляю модал в теги {foreach}, он заполняется только информацией для одного конкретного элемента (в зависимости от того, где я его размещаю. Например: это может быть первый элемент или если я помещаю его между {foreach from = $ flowers3 item = row} это будет последний из первого ряда), но я не могу заставить его обновить каждый элемент в конкретном «быстром просмотре», по которому щелкают.

Заранее благодарю за любую помощь!!