Pfthb

$(document).ready(function()
 $.ajax(
 type:"GET",
 url:"data.xml",
 dataType:"xml",
 success:xmlParser2
 );
 );
 function xmlParser2(xml)
 xml = $(xml).children();
 let i = 0;
 let total = $(xml).children().length;
 $(xml).children().each(function (idx,index,item) 

 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 reveal" id="random">
 <div class="thumbnail randomdiv3">
 <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">‹</a>
 <a href="#$tag + nextIdx" class="next round">›</a>
 <h6>$head</h6>
 <a class="close" href="#">&times;</a>
 <div>$image2</div>
 </div>
 </div>`;

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