multiple jquery popups in cakephp

Question

Hi all, am showing a list of emails, and for each email on click, am trying to create a popup, to show the full email content....

the prob is that, popup works only for 1st email, for rest it doent show anything,

here is my code,

foreach ($email as $x){

            echo "<div id='popuup_div' class='popup_msg'>";
            echo "<div id='image'>";
            echo $html->image('mail.png');
            echo "</div>";
            echo "<br>";
            echo $client['Email']['body'];
            echo "</div>";

            $show = substr($client['Email']['body'], 0, 65);


            echo $html->tableCells(array(array($client['Email']['date'], $client['Email']['time'],
                            $client['Email']['from'], $show . "......" .
                            "<div id='popupShow'> Show more....... </div>")));}

jquery code

jQuery.noConflict();
 `jQuery(document).ready(function(){   

jQuery('#popupShow').click(function(e){ //getting height and width of the message box var height = jQuery('#popuup_div').height(); var width = jQuery('#popuup_div').width(); //calculating offset for displaying popup message leftVal=e.pageX-(width/1.5)+"px"; topVal=e.pageY-(height/13)+"px"; //show the popup message and hide with fading effect jQuery('#popuup_div').css({left:leftVal,top:topVal}).show(); });

jQuery('#image').click(function(e) { jQuery('#popuup_div').fadeOut('fast'); }); });`

how can i make it works for all the emails?

Answer 1

HTML id's must be unique. Try replacing your id's with classes.

Answer 2

I don't see a lot of CakePHP in this problem. Nor do I see a loop that would iterate over the emails.