JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<input type="text" id="inputAdd_page" onfocusout="createElements()" />
<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

function createElements(){
 var count = 5,  
     
        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' + j]);
            button.innerHTML=[1 + j];
            
            div.className = "page";
            div.setAttribute('id', ['page' + j]);
            
            div.style.position="absolute";            
            fragment.appendChild(div);
            fragment.appendChild(button);
        }
      document.body.appendChild(fragment);
}