如何使jquery脚本支持动态id

我有一个div弹出脚本，按预期工作-看到这里的工作版本。我希望在php循环中使用此代码，但似乎div id是固定引用，因此我不能在循环中使用此代码，因为div id只能被引用一次。

我正在寻找一个解决方案，以某种方式允许jquery弹出脚本支持动态div id，但不确定如何做到这一点。

这是我的html/php代码，我可以分配一个动态div id:

$counter是一个数字，该数字在每次循环中增加，即inline-popups1, inline-popups2等。

$content = "<!-- Jquery reference -->
<div id='inline-popups".$counter."'>
<!-- Popup link -->
    <a href='#popup".$counter."'>Popup Link</a>
  </div>
<!-- Popup itself -->
<div id='popup".$counter."' class='white-popup mfp-with-anim mfp-hide'>
  <p>content goes here</p>
</div>";

这里是jquery -你可以看到$('#inline-popups')是一个固定的引用。我需要它来支持如上所示的动态引用。

// Inline popups
$(document).ready(function() {
    $('#inline-popups').magnificPopup({
      delegate: 'a',
      removalDelay: 500, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });
});

$("[id^='inline-popups']")