JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="form-control title_Textbox" id="title_Text" placeholder="Text">
<input type="text" class="form-control title_Textbox" id="inputAdd_page" placeholder="No Of Pages">
<div class="preview_windowSize" id="page"></div>
<div id="pageBtn" class="row pagination_btn"></div>

CSS

.div_navig{
  background: lightGrey;
  width: 24px;
  height: 24px;
  text-align: center;
  margin-left: 5px;
  color: black;
  cursor: pointer;
}
.pagination_btn{
  float: right;
  margin:0 20px 0 0;
  padding-left: 5px;
}
.spanCount{
  position: absolute;
  bottom: 0;
  right: 0;
  padding:0 10px 0 5px;
}
.preview_windowSize{
	margin:15px 15px 15px 15px;
	height:300px;
    padding: 5px;
}
.preview_windowSize_element {
	position: absolute;
	background-color:lightGrey;
	border: 1px solid rgb(155,155,155);
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 5px;
    width: 93.5%;
    height: 300px;
}
.title_boundry{
    border: 1px dotted #000;
    height: 40px;
}

JavaScript

var gettext_Title = document.getElementById('title_Text')
var getresult = gettext_Title.value;
//alert(result);

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');
      navbutton = document.createElement('button');
      hTitle = document.createElement('p');
      preview_PageSize = document.getElementById('page');
      
      navpageBtn = document.getElementById('pageBtn');


      navbutton.className = "div_navig";
      navbutton.setAttribute('id', ['pag_navg' + totalCount]);
      navbutton.setAttribute('data-page', totalCount);
      navbutton.innerHTML = [1 + totalCount];
      navbutton.addEventListener('click', function (e) {
        var el = e.target;
        var page = parseInt(el.getAttribute('data-page'), 10);
        var allPages = document.querySelectorAll('.preview_windowSize_element');
        Array.prototype.forEach.call(allPages, function (pageElement) {
          pageElement.style.zIndex = 0;
          });
        
        var pageEl = document.querySelector('div[data-page="' + page + '"]');
        pageEl.style.zIndex = 10;
        });

      spancount.className = "spanCount";
      spancount.innerHTML = [1 + totalCount];
       
      hTitle.setAttribute('id', ['Title' + (totalCount)]);
      hTitle.className = "title_boundry";
      
      prevPage.className = "preview_windowSize_element";
      prevPage.setAttribute('id', ['page' + (totalCount)]);
      prevPage.setAttribute('data-page', totalCount);
      prevPage.appendChild(spancount);
      prevPage.appendChild(hTitle);
      navpageBtn.appendChild(navbutton);

      preview_PageSize.insertBefore(prevPage,...