Infinity Scroll with dynamic items

I am not that great with JS but I created some code to pull info from an XML file and build out the <article> tags. It work great on the first (main page) but break on the portfolio-infinity-scroll-2.html. Here is the code (don’t laugh), I just change it i=n in the for statement or scroll page(s),

    <script>

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
            }
        };
        xhttp.open("GET", "xml/photo_albums.xml", true);
        xhttp.send();

        function myFunction(xml) {

            var xmlDoc = xml.responseXML;
            var i;
            var grouping = xmlDoc.getElementsByTagName("grouping");
            for (i = 0; i < 12; i++) {
                var tag1 = "";
                if (grouping[i].getElementsByTagName("tag1")[0] != "none") {
                    var tag1 = grouping[i].getElementsByTagName("tag1")[0].childNodes[0].nodeValue;
                }
                var tag2 = "";
                if (grouping[i].getElementsByTagName("tag2")[0] != "none") {
                    var tag2 = grouping[i].getElementsByTagName("tag2")[0].childNodes[0].nodeValue;
                }
                var tag3 = "";
                if (grouping[i].getElementsByTagName("tag3")[0] != "none") {
                    var tag3 = grouping[i].getElementsByTagName("tag3")[0].childNodes[0].nodeValue;
                }
                var tag4 = "";
                if (grouping[i].getElementsByTagName("tag4")[0] != "none") {
                    var tag4 = grouping[i].getElementsByTagName("tag4")[0].childNodes[0].nodeValue;
                }
                var image1 = "";
                if (grouping[i].getElementsByTagName("image1")[0] != "none") {
                    var image1 = grouping[i].getElementsByTagName("image1")[0].childNodes[0].nodeValue;
                }
                var image2 = "";
                if (grouping[i].getElementsByTagName("image2")[0] != "none") {
                    var image2 = grouping[i].getElementsByTagName("image2")[0].childNodes[0].nodeValue;
                }
                var image2 = "";
                if (grouping[i].getElementsByTagName("image2")[0] != "none") {
                    var image2 = grouping[i].getElementsByTagName("image2")[0].childNodes[0].nodeValue;
                }
                var image3 = "";
                if (grouping[i].getElementsByTagName("image3")[0] != "") {
                    var image3 = grouping[i].getElementsByTagName("image3")[0].childNodes[0].nodeValue;
                }
                var folder = grouping[i].getElementsByTagName('folder')[0].childNodes[0].nodeValue;
                var grouptype = grouping[i].getElementsByTagName('grouptype')[0].childNodes[0].nodeValue;
                var itemlist;
                if (grouptype == 'Single') {
                    itemlist += "<article class='portfolio-item " +
                    tag1 + " " +
                    tag2 + " " +
                    tag3 + " " +
                    tag4 + "'><div class='portfolio-image'><a href='gallery.html?album=" + folder +
                    "'><img src='gallery/" + folder +
                    "/thumbs/" + image1 +
                    ".jpg' /></a><div class='portfolio-overlay'><a href='gallery/" + folder +
                    "/images/" + image1 +
                    ".jpg' class='left-icon' data-lightbox='image'><i class='icon-line-plus'></i></a><a href='gallery.html?album=" + folder +
                    "' class='right-icon'><i class='icon-line-ellipsis'></i></a></div></div><div class='portfolio-desc'><h3><a href='gallery.html?album=" + folder +
                    "'>" + folder +
                    "</a></h3><span><a href='#'>" + tag1 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag2 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag3 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag4 +
                    "</span></div></article>";
                } else {
                    itemlist += "<article class='portfolio-item " +
                    tag1 + " " +
                    tag2 + " " +
                    tag3 + " " +
                    tag4 + "'><div class='portfolio-image'><div class='fslider' data-arrows='false' data-speed='700' data-pause='7000'><div class='flexslider'><div class='slider-wrap'><div class='slide'><a href='gallery.html?album=" + folder +
                    "'><img src='gallery/" + folder +
                    "/thumbs/" + image1 +
                    ".jpg'></a></div><div class='slide'><a href='gallery.html?album=" + folder +
                    "'><img src='gallery/" + folder +
                    "/thumbs/" + image2 + ".jpg'></a></div></div></div></div><div class='portfolio-overlay' data-lightbox='gallery'><a href='gallery/" + folder +
                    "/images/" + image1 +
                    ".jpg' class='left-icon' data-lightbox='gallery-item'><i class='icon-line-stack-2'></i></a><a href='gallery/" + folder +
                    "/images/" + image2 +
                    ".jpg' class='left-icon' data-lightbox='gallery-item'><i class='icon-line-stack-2'></i></a><a href='gallery.html?album=" + folder +
                    "' class='right-icon'><i class='icon-line-ellipsis'></i></a></div></div><div class='portfolio-desc'><h3><a href='gallery.html?album=" + folder +
                    "'>" + folder +
                    "</a></h3><span><a href='#'>" + tag1 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag2 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag3 +
                    "</a>&nbsp&nbsp <a href='#'>" + tag4 +
                    "</span></div></article>";
                }
            }
            document.getElementById("portfolio").innerHTML = itemlist;
        }

    </script>

And my page URL: http://www.medugno.org/photo_albums.html
Again sorry about the horrible code, but I’m not a JS developer any help would be very much appreciated