JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<input type="text" id="inputAdd_page" />

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;    
    text-align:center;
    padding:0;
}
.spanCount{
    position:absolute;
    bottom:0px;
    right:0px;
    padding:0 5px 5px 0;
}

JavaScript

// Maintain a variable that holds the current value
var inputElement = document.getElementById("inputAdd_page");
var totalCount = 0;
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) {
            spancount = document.createElement('span');
            prevPage = document.createElement('div');
            button = document.createElement('button');
            
            button.className = "btn";
            button.setAttribute('id', ['pag_navg' + totalCount]);
            button.innerHTML=[1 + totalCount];
            
            spancount.className = "spanCount";
            spancount.innerHTML=[1 + totalCount];
            
            prevPage.className = "page";
            prevPage.setAttribute('id', ['page' + totalCount]);
            prevPage.appendChild(spancount);
            
            
            prevPage.style.position="absolute";            
            fragment.appendChild(prevPage);
            fragment.appendChild(button);
            totalCount++;
        }
        inputElement.value="";
      document.body.appendChild(fragment);
    }
});