How to add next previous buttons to popup?

Question

I need to load XML data to next and previous buttons on the popup box. When button click, my code is fail to load the XML data. How can I implement the code.

Here is the script

function xmlParser(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {                    
        let tag = $(this).prop("tagName");
        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">
                    <a href="#${tag}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                 </div>`;
        let popup = `<div id="${tag}" class="overlay">
                <div class="popup">

                <a href="#${tag}" class="previous round">&#8249;</a>
                <a href="#${tag}" 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);
    });
}

Plunker

Answer 1

Firstly div id is being duplicated if you use directly tag name. So use index in for loop and do some simple calculation to get prev & next items, something like:

$(xml).children().each(function (idx) {     

    let tag = $(this).prop("tagName");
    let nextIdx = idx + 1;
    let prevIdx = idx - 1;

    //to make cyclic rotation
    nextIdx = nextIdx == total ? 0 : nextIdx;
    prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

    //..........check plunker code

http://next.plnkr.co/edit/Sj188FthvFu6H5uv?open=lib%2Fscript.js