Dynamic php modal - php

Question

I'm trying create modal that is dynamic and pre fills with the details of the item that is clicked on. Here is my code:
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
<input type="Radio" name="product" value="{$item.id}s" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.ps|money:0}</span> | med
<input type="Radio" name="product" value="{$item.id}m" style="border:0;cursor:pointer;" />
<span style="font-weight: bold">${$item.pm|money:0}</span> | lg
<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}
Here's the 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;}
?>
And here's the modal:
<!--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 -->
When I add the modal within the {foreach} tags, it only fills with the information for one particular item (depending on where I place it. ex: it might be the first item, or if I place it between the {foreach from=$flowers3 item=row} it will be the last of the first row) but I can't get it to update every item on the particular "Quick View" that is clicked.
Thanks in advance for any help!!

Answer 1

Store the properties of the items in data-attributes of the item 's in your html:
<div class="item ..." ... data-title="Nice flower" data-price="€1,20" > ... </div>
Now use some javascript to update the modal. jQuery example:
$('.item').click(function(){
var el = $(this);
$('.modal .product-title').text(el.attr('data-title'));
// and the rest of the properties, then open the modal
});