bpopup插件将循环PHP脚本中的一个div元素关联起来

我正在使用bpopup，页面上有多个弹出链接，每个链接有多个内容。要将JQuery与每个链接相关联，我使用[id^=“div_name”]。JS如下所示：-

$(document).ready(function()
{
    console.log( 'ready!' );
    $('[id^="click"]').bind('click', function(){
    $('[id^="profile"]').css('display','inline');
    $('[id^="profile"]').bPopup({
       modalClose: true
      , opacity: .8
      , positionStyle: 'fixed' 
      , fadeSpeed: 'slow'
      , followSpeed: 'slow'
      });
   });
});

相应的PHP脚本具有：-

<?php
foreach($listings as $listing)
{   
        <a id="click" href="some url"><?php echo $listing->profile_link;?></a>
        <div id="profile" style="background-color:#fff; width:400px; height:400px; display:none; "><?php echo $listing->company_name; ?></div>
     }

}

所有列表都与弹出操作关联。但是，它们的内容与上次的

$listings->company\u name

相同。但是，我希望内容有单独的公司名称。我意识到我使用的是同一个div id，在浏览器上呈现内容后，它会将最后一个div id与所有弹出窗口相关联。我如何解决这个问题