SimpleModal Foreach Loop Dynamic Content - php

Question

How would you use simplemodal within a foreach loop so that it does not repeat the same information?
Example:
foreach($ret as $v)
{
<div id='osx-modal'>
<input type='button' name='osx' value='View' class='osx demo'/>
</div>
<div id="osx-modal-content">
<div class="close">x</div>
<div id="osx-modal-data">
<div id="toon_box">
<div id="toon_name">
<?php echo $v['toon_name'];?>
</div>
<div id="toon_avatar">
<?php echo '<img src="' . $v['avatar'] . '" alt="" />';?>
</div>
</div>
</div>
}
The meta data is pulled from users on the website and displays that meta data for each user in separate Modals. For clarification let's say foreach is repeated 10x since here is 10 users in the database. That will create 10 separate buttons for each user, that when you click the modal box pops up with the data inside of it.
The problem is, that when you click each button its the same user in each modal box. How would you set this up so each modal box displays the correct user meta data. I've already checked if persistence is set to false in simplemodal.js and it is.

Answer 1

The reason you are having the same meta data in the same model box is because this line of code
<input type='button' name='osx' value='View' class='osx demo'/>
using class is very generic so you should be using id instead where each button has its own uniqid
<input type='button' name='osx' value='View' id='os1'/>
<input type='button' name='osx' value='View' id='os2'/>
Now your <div id="osx-modal-content"> would also look like this
<div id="osx-modal-content1">
<div id="osx-modal-content2">
Your javascript would look like this
$("os1").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content1").html()
});
});
$("os2").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content2").html()
});
});
Can use see the way everything is mapped ??? this is who you achieve each content in each model
Let me know if you need more information
Edit 1 Example
<?php
$x = 0;
foreach ( $ret as $v ) {
$x ++;
$content = "
<script type=\"text/javascript\">addModal($x)</script>
<div id='osx-modal'>
<input type='button' name='osx' value='View' id='osx{$x}'/>
</div>
<div id=\"osx-modal-content{$x}\">
<div class=\"close\">x</div>
<div id=\"osx-modal-data\">
<div id=\"toon_box\">
<div id=\"toon_name\">
{$v['toon_name']}
</div>
<div id=\"toon_avatar\">
<img src=\"{$v['avatar']}\" alt=\"\" />
</div>
</div>
</div>";
}
?>
<script type="text/javascript">
function addModal(x)
{
$("osx" + x).addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content" + x).html()
});
});
}
</script>

Answer 2

Finally got it to work thanks to standup75!
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[name=osx]").click(function (e) {
e.preventDefault();
$(this).parent().next().modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},