在表格中加载带有JavaScript XML数据的更多按钮

Question

我正在尝试将xml数据加载到表中后限制表显示10行，然后有一个load more按钮来显示之后的更多表行，但是我似乎无法正常工作？

HTML

<table id="demo"></table>

JS

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this);
        }
    };
    xmlhttp.open("GET", "/data.xml", true);
    xmlhttp.send();
}
function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<thead class=\"design1\"><tr><th>Data 1</th><th>Data 2</th><th>Headquarters</th><th>Data 3</th><th>Data 4:</th></tr></thead><tbody id='myTable'>";
    var x = xmlDoc.getElementsByTagName("ROOT");

    for (i = 0; i <x.length; i++) {
        table += "<tr><td><a target='_blank' href='"+ x[i].getElementsByTagName("site")[0].childNodes[0].nodeValue +"'>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</a></td><td>"  + x[i].getElementsByTagName("city")[0].childNodes[0].nodeValue + "</td><td>"  + x[i].getElementsByTagName("data1")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td class='hidden'>" + x[i].getElementsByTagName("country")[0].childNodes[0].nodeValue + "</td><td class='hidden'>" + x[i].getElementsByTagName("city")[0].childNodes[0].nodeValue +  "</td></tr>";
    }
   table += "</tbody>";
    document.getElementById("demo").innerHTML = table;
}

Xml样本： https://sendeyo.com/en/d7929496f2 （无法再添加代码）