JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>Pager Practice</title>
        <link rel="stylesheet" href="css01.css" />
    </head>
    
    <body>        
        <div class="pager">
            <button id="prevButton">prev</button>
            <p class="pageNumber" id="currentPage"></p>
            <button id="nextButton">next</button>
        </div>
        
        <script src="pager.js"></script>
    </body>

</html>

CSS

.pageNumber {
  display: inline;
}

JavaScript

var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.innerHTML = pageCount; //not sure why need ++ here but won't increase unless click twice

//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);


function nextPage() {
    var elPageIncrease = document.getElementById("currentPage");
    elPageIncrease.innerHTML = pageCount++;
}


var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);

function prevPage() {
    var elPageDecrease = document.getElementById("currentPage");
    elPageDecrease.innerHTML = pageCount--;
}