JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="inputAdd_page" />
<div id="page" class="page">
    &nbsp
</div>

CSS

.page{
    width:450px;
    height:250px;
    border:1px solid red;
    margin-top:5px;
    position:absolute;
    background-color:rgb(234,234,234);
}
.btn{
    background:rgb(250,250,250);
    width:24px;
    height:24px;    
}

JavaScript

// Maintain a variable that holds the current value
var inputElement = document.getElementById("inputAdd_page"),
    totalCount = 0;
debugger;
inputElement.addEventListener('blur', function() {
    var count = this.value;
    // Gaurd condition
    // Only if it is a number
    if(count && !isNaN(count)) {
        fragment = document.createDocumentFragment();
        for (var j = 0; j < count; ++j) {
            div = document.createElement('div');
            button = document.createElement('button');
            button.className = "btn";
            button.setAttribute('id', ['pag_navg' + totalCount + j]);
            button.innerHTML=[1 + j];
            
            div.className = "page";
            div.setAttribute('id', ['page' + totalCount + j]);
            
            div.style.position="absolute";            
            fragment.appendChild(div);
            fragment.appendChild(button);
            totalCount++;
        }
      document.body.appendChild(fragment);
    }
});