popup problem : not showing proper corresponding content

Question

iterating over an array, am printing some div content for each iteration. Whenever the user clicks on any div content, a popup should appear and should show the corresponding content in the popup from the array.

below is my code,

foreach ($email as $client)
{

                echo "<div class = 't'> Show more....... </div>";
                echo "<div class='popup_msg'>";
                echo $client['Email']['body'];
                echo "</div>";

}

javascript code below

jQuery(document).ready(function(){

jQuery('.t').click(function(e)
{
  var height = jQuery('.popup_msg').height();
  var width = jQuery('.popup_msg').width();
  leftVal=e.pageX-(width/1.5)+"px";
  topVal=e.pageY-(height/13)+"px";

  jQuery('.popup_msg').css({left:leftVal,top:topVal}).show();
});

jQuery('.popup_msg').click(function(e)
{
jQuery('.popup_msg').fadeOut('fast');
});


});

in the above codes, what i want to achieve is, whenever the user clicks on the div with class t, the corresponding $client['Email']['body'] should appear in the popup

Answer 1

The problem is that your selector matches all .popup_msg, not only the one you need. Use the find() method to get the correct popup in the $('.t').click function:

jQuery('.t').click(function(e)
{
      var popup_msg = jQuery(this).find('.popup_msg');
      var height = popup_msg.height();
      var width = popup_msg.width();

      leftVal=e.pageX-(width/1.5)+"px";
      topVal=e.pageY-(height/13)+"px";

      popup_msg.css({left:leftVal,top:topVal}).show();
});

Note: I haven't tested this code, it might not be 100% correct but hopefully you get what I mean.