JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<div id="leftcontainer"><a href="#" id="lastlink"><div id="lastbutton">Last</div></a>
</div>
<div id="rightcontainer"><a href="#" id="nextlink"><div id="nextbutton">Next</div></a>
</div>

CSS

#lastbutton {
    display: inline-block;
    width: 80px;
    height: 20px;
    background-color: #0a72c2;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 8px;
    font-size: 16px;
}
#nextbutton {
    display: inline-block;
    width: 80px;
    height: 20px;
    background-color: #0a72c2;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 8px;
    font-size: 16px;
}
#leftcontainer {
    margin-top: 30px;
    float: left;
    text-align: center;
    width: 50%;
}
#rightcontainer {
    margin-top: 30px;
    text-align: center;
    float: right;
    width: 50%;
}

JavaScript

function hideLeftButton() {
    var leftContain = document.getElementById('leftcontainer');
    var rightContain = document.getElementById('rightcontainer');
    leftContain.style.display = 'none';
    rightContain.style.width = '100%';
    rightContain.style.float = 'none';
}

function linkSet() {
    var currentURL = location.href,
        parts = currentURL.split('/'),
        lastURL = '',
        nextURL = '';

    parts.pop();
    number = parts.pop();
    var root = parts.join('/') + '/';

    if (isNaN(number) === true) { 
        hideLeftButton()
        lastURL = currentURL;
        nextURL = currentURL + '2/';
    } else if (number == 2) {
        lastURL = root;
        nextURL = root + '3/';
    } else {
        lastURL = root + (+number - 1) + '/';
        nextURL = root + (+number + 1) + '/';
    }
    document.getElementById('lastlink').href = lastURL;
    document.getElementById('nextlink').href = nextURL;
}
linkSet();