仅显示第一项的放大弹出菜单

使用jQuery和Magnific Popup的新手-我有一个图像网格，当你点击一个图像时，我希望Magnific Popup显示一个div，其中包含与特定图像相关的信息。

<div class="grid">
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/a.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>A, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/ab.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>Ab, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/f.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>F, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>

这是jQuery-

$(function() {
 $('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true
 })
}); 

当你点击网格中的任何图像（img.object）时，Magnific Popup只显示第一个网格项中的div（.test Popup）。