Использование magnific popup lightbox с несколькими экземплярами

Question

Я использую плагин jQuery magnific popup, чтобы отображать дополнительный контент в виде простой лайтбокс на каждом просмотре acticles с моего сайта.

Первое всплывающее окно работает, однако все остальные экземпляры открывают содержимое первого экземпляра.

Зная, что список статей/всплывающих окон, отображаемых на одной странице, не является фиксированным.

Есть ли способ различать каждое всплывающее окно с той же страницы?

HTML

<a id="pop" class="popup-with-zoom-anim" href="#small-dialog">More content</a> 

<div id="small-dialog" class="zoom-anim-dialog mfp-hide"> 
.. PHP generated content .. 
</div> 

JS

$('.popup-with-zoom-anim').magnificPopup({ 
    type: 'inline', 
    fixedContentPos: false, 
    fixedBgPos: true,  
    overflowY: 'auto', 
    closeBtnInside: true, 
    preloader: true,    
    midClick: true, 
    removalDelay: 300, 
    mainClass: 'my-mfp-zoom-in' 
}); 

Answer 1

Я только что нашел способ сделать это. Для всех, кто читает это:

Вам просто нужно создать уникальное имя для каждого всплывающего окна.

<a id="pop" class="popup-with-zoom-anim" href="#unique-variable">More content</a> 

<div id="unique-variable" class="zoom-anim-dialog mfp-hide"> 
.. PHP generated content .. 
</div>