function getSpotHtml(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${timeday[i]}</td>
                    <td>${hispass[i]}</td>
                    <td>${hisfail[i]}</td>
                    <td>${hisstack[i]}</td>
                    <td>${hisrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}

function getSpotHtml1(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${goodid[i]}</td>
                    <td>${goodpass[i]}</td>
                    <td>${goodfailrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}

function getSpotHtml2(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${badid[i]}</td>
                    <td>${badpass[i]}</td>
                    <td>${badfailrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}


function showEachSpot() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 4;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml(htmlbody, i);
    }
    $("#rank-one").html(htmlbody);
    //console.log(htmlbody);
}

function showEachSpot1() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 3;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml1(htmlbody, i);
    }
    $("#rank-two").html(htmlbody);
    //console.log(htmlbody);
}

function showEachSpot2() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 3;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml2(htmlbody, i);
    }
    $("#rank-three").html(htmlbody);
    //console.log(htmlbody);
}