如何使用JavaScript合并两个XML文件？

Question

我创建了一个示例代码，用于从XML查看数据。在页面加载时，该代码默认显示一个文件的数据。页面上会有一个按钮来显示下一个文件中的数据。我当前的代码在单独浏览内部运行弹出框。但是我需要在单击按钮时合并所有弹出窗口（该两个文件的弹出框）。如何解决该问题？

这是我的代码。

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

function xmlParser(xml){
  var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });

    xml = $(xml).children();
    let i = 0;
    let total = $(xml).children().length;

    items.each(function (idx,index,item) { 

    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")+index;
        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>`;

        i++;


        if(i <= 3)    {
            $("#xmldata").append(html);
            $("#xmldataall").append(html);
        }
        
        $("#popup").append(popup);
    });        

    var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
    });
}


    
       $(document).ready(function(){
    // adding click event listener to the button
    $('#myButton1').on('click', function() {
        // make the AJAX request
        $.ajax({
            type:"GET",
            url:"data_hidden.xml",
            dataType:"xml",
            success:xmlParser2
        });
    });    
});

function xmlParser2(xml){
  var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });

    xml = $(xml).children();
    let i = 0;
    let total = $(xml).children().length;

    $("#xmldata_hidden").empty();

    items.each(function (idx,index,item) { 

    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")+index;
        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_hidden").append(html);
        $("#popup2").append(popup);
    });        

    var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
    });
}

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

        <section>
                <div class="container">
                    <input type="button" value="View All" id="myButton1" class="reveal" style="float: right;"  onclick="toggler('toggle_container');">

                        <div id="toggle_container" class='hide'>
                        <div class="block">
                           <div class="row" id="xmldata_hidden"></div>
                           <div id="popup2"></div>
                        </div>
                </div>
             </div>
            </section>
        <section id="popup"></section>

Plunker