JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<input type="text" class="form-control title_Textbox" id="inputAdd_page" placeholder="No Of Pages">	
<input type="text" class="form-control title_Textbox" id="title_Text" placeholder="Text">

<div id="pageBtn" class="row pagination_btn"></div>

CSS

.title_Textbox{
	border: 1px solid rgb(152,152,152);
	width: 230px;	
	padding:5px 0 5px 5px;
}
.preview_windowSize{
	margin:15px 15px 15px 15px;
	height:300px;
    padding: 5px;
}
.title_boundry{
    border: 1px dotted #000;
    height: 40px;
}
.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;
}

JavaScript

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";
	  //alert(getText_Result);
      //hTitle.appendChild(getText_Result);
		
	  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, preview_PageSize.childNodes[0]);

      totalCount++;
  ...