如何在循环中运行弹出框？

Question

我添加了自动过期XML节点的代码。该代码工作正常。然后，我添加代码以循环弹出框。该代码已添加到弹出窗口的下一个和上一个按钮。它无法正常工作。当代码找到expire div时，它将停止循环。如何解决该问题？

这是我的代码。

$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"data.xml",
        dataType:"xml",
        success:xmlParser
    });
});

function xmlParser(xml){
    xml = $(xml).children();
    let total = $(xml).children().length;
    $(xml).children().each(function (idx) {

        let expireArray = $(this).attr('expires').split('/');
        const expireDate = `${expireArray[2]}${expireArray[1]}${expireArray[0]}`;
        const now = new Date(),
            nowDate = `${now.getFullYear()}${(now.getMonth()+1) <10 ? '0'+(now.getMonth()+1): (now.getMonth()+1)}${now.getDate()}`;

        if (nowDate > expireDate) {
            return;
        }      
        
        let tag = $(this).prop("tagName");
        let nextIdx = idx + 1;
        let prevIdx = idx - 1;
        //to make cyclic
        nextIdx = nextIdx == total ? 0 : nextIdx;
        prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
        let head = '<div>' + $(this).find("head").text() + '</div>';
        
        
        let html = `<div class="col-sm-4 random" id="random">
                    <div class="thumbnail randomdiv3" id="border" >
                    <a href="#${tag + idx}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                    </div>
                 </div>`;
        let popup = `<div id="${tag + idx}" class="overlay">
                <div class="popup">
                
                <a href="#${tag + prevIdx}" class="previous round">&#8249;</a>
                <a href="#${tag + nextIdx}" class="next round">&#8250;</a>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div>${image2}</div>
                </div>
            </div>`;


        $("#xmldata").append(html);
        $("#popup").append(popup);
    });
}

<div class="row" id="xmldata"></div>

         <section id="popup"></section>

Plunker