Please see this page
http://dev.beckin.com/products.html?mode=list

I am running a loop with 10 different popup boxes being outputed on the each page. I was able to get the popup box working but when I hover over one it activates all 10 popup boxes. I know this is because I do not have a different id for each one. I know how to add a number to the end of the id popup-box by using $i++ in my loop but I dont know how to make the jquery script only activate that id. Any help or a better way of doing this would be helpful!

Here is my code:

Code:
  <div class="container">

      <a href="#" id="trigger"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/frontend/fortis/default/images/zoomGlass.png" alt="<?php echo $_productNameStripped ?>" /></a>

<div class="actionpop" id="pop-up">
        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
    </div>
  </div>
Code:
    <script type="text/javascript">
      $(function() {
        var moveLeft = 20;
        var moveDown = 10;
        
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
          //.css('top', e.pageY + moveDown)
          //.css('left', e.pageX + moveLeft)
          //.appendTo('body');
        }, function() {
          $('div#pop-up').hide();
        });
        
        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('marginTop', -20).css('marginLeft', 60).css('z-index', 9999);
        });
        
      });
    </script>