JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"></div>
<div id="pagination"></div>

CSS

body{
    font-family: Arial, sans-serif;
    
}

img{
    display:block;
    height:3em;
    width:3em;
    background:#eceded;
}

h4{
    margin-bottom:.1rem;
}
p{
    font-size:.8em;
    color:#555;
    margin-top:0;
}

JavaScript

var page = 1, perPage = 10, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;

function paganation(page)
{
    var nextMaxItem = perPage * page,
        fromItem = (page - 1) * perPage,
        maxPages = Math.ceil( records.length / perPage ), // <-----------

        xmlContent = '<div class="row">';
    for (var i = fromItem; i < nextMaxItem; i++) {
        if(records[i] === undefined) break; // <-----------
        xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
            + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail">'
            + '<img src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" />'
            + '<div class="caption">'
            + '<a href="' + records[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue + '">'
            + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
            + '</a>'
            + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
            + '</div>'
            + "</div></div></article>";
    }
    xmlContent += "</div>";
    content.innerHTML = xmlContent;

    var paginationContent = "";
    if (page > 1) {
        paginationContent += ' <a href="javascript:paganation('+(page - 1)+');">Back</a> ';
    } else {
        paginationContent += " Back ";
    }

    for (var j = 1; j <= maxPages; j++) { // <----------- <= instead of <
        paginationContent += ' <a href="javascript:paganation('+j+');">'+j+'</a> ';
    }

    var next = page + 1;
    if (next <= maxPages) {
        paginationContent += ' <a href="javascript:paganation('+next+');">Next</a> ';
    } else {
        paginationContent += " Next ";
    }
    pagination.innerHTML = paginationContent;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
   ...