JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jquery-1.8.2.min.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?logLevel=debug&_opt=true"></script> 
<div class="topnav" id="myTopnav">
  <a href="#Back" onclick="toggle()">Back</a>
 <!--  <a href="#toc" onclick="paramPageHandler()">TOC</a> -->
  <a href="#first" onclick="firstPageHandler()">First</a>
  <a href="#last" onclick="lastPageHandler()">Last</a>
  <a href="#prev" onclick="previousPageHandler()">Prev</a>
  <a href="#next" onclick="nextPageHandler()">Next</a>  
  <label class="navLabel">Page&nbsp;</label>
  <input id="currentPage" type="text" value="1" style="width: 30px" onclick="gotoPageHandler()" onkeydown="keyDownFunction(event)"/>
  <label class="navLabel">&nbsp;of&nbsp;</label><label class="navLabel" id="totalPageNumber"></label>
  <label class="navLabel">&nbsp;&nbsp;</label>
  <select class="navSelect" id="zoomSelect" onchange="zoomHandler()">
  <option value="0.25">25%</option>
  <option value="0.5">50%</option>
  <option value="0.75">75%</option>
  <option value="1" selected="selected">100%</option>
  <option value="1.5">150%</option>
  <option value="2">200%</option>
  <option value="3">300%</option>
  <option value="4">400%</option>
  </select>  
  <label class="navLabel">&nbsp;Search&nbsp;</label>
  <input id="searchString" type="text" value="" onclick="searchHandler(this.value)"  style="width: 80px"  onkeydown="searchKeyDown(event,this.value)"/><label class="navLabel">&nbsp;</label>
  <button class="navButton" id="button" >Export&nbsp;</button>
</div>

<div  id="container"> 
  <div  id="parentReport"></div>
  <div  id="loadReport"><B>Loading......</B></div>
</div>

CSS

.highlight
{
background-color:yellow;
}


body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #e0e0d0;
  margin:auto;  
  padding: 5px;
}

.topnav a {
  float: left;
  display: block;
  color: #333;   
  padding: 0px 5px;
  text-decoration: arial;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav input {
  float: left;
  display: inline-block;
  color: #222;  
  padding: 2px;
  text-decoration: arial;
  font-size: 10px;  

}

.navLabel {
  float: left;
  display: inline-block;
  color: #333;
  text-decoration: arial;
  font-size: 14px;
}

.navButton {
  float: left;
  display: inline-block;
  color: #333;
  text-decoration: arial;
  font-size: 11px;
  padding: 2px 2px;
}

.navSelect {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 1px;
  text-decoration: arial;
  font-size: 12px;
}

JavaScript

var reportMap = [];
var ERS_ReportParams =[];
var reportURL = [];
var ERS_ACTON_GET_RPT_INSTANCE_PARMS = "getRptInstanceParams";
var USER_ID = "XECCPHQ";
var report;
var ersJasperParams = {};
var current_page = 1;
var totalPages = 1;
var parentRpt;
var reportRef = [];
var refCnt=-1;

document.domain="bnymellon.com";


	
reportMap[20444] = "SOCINA";
reportMap[20447] = "ASBT";
reportMap[12015] = "TR";
reportMap[12013] = "PCW";
reportMap[12010] = "CHCIW";
reportMap[12014] = "CSTC";
reportMap[12005] = "SCB";
reportMap[12016] = "SCS";

reportMap[12002] = "CV";
reportMap[12004] = "FET";
reportMap[12006] = "CAST";
reportMap[12007] = "UT";
reportMap[12008] = "PFE";
reportMap[12009] = "NSC";
reportMap[12010] = "CHCIW";
reportMap[12013] = "PCW";
reportMap[12014] = "CSTC";
reportMap[12016] = "SCS";
reportMap[12017] = "PCS";
reportMap[12018] = "CANAR";
reportMap[20444] = "SOCINA";


	
	

reportURL[20447] = "/ERS_Reporting/Reports/AccountSummaryByType";
reportURL[12015] = "/ERS_Reporting/Reports/TaxReclaimsCIW";
reportURL[20444] = "/ERS_Reporting/Reports/StatementOfChangeInNetAssets";   
reportURL[12013] = "/ERS_Reporting/Reports/ProjectedCashWorksheet";
reportURL[12010] = "/ERS_Reporting/Reports/CustodyHoldingsCIW";
reportURL[12014] = "/ERS_Reporting/Reports/CustodySecurityTransactionsCIW"; 
reportURL[12005] = "/ERS_Reporting/Reports/SettledCashBalances";
reportURL[12016] = "/ERS_Reporting/Reports/SettledCashStatement";


reportURL[12002] = "/ERS_Reporting/Reports/CustodyValuation";
reportURL[12004] = "/ERS_Reporting/Reports/ForeignExchangeTransactions";
reportURL[12006] = "/ERS_Reporting/Reports/CashAndSecurityTransactions";   
reportURL[12007] = "/ERS_Reporting/Reports/UnsettledTrades";
reportURL[12008] = "/ERS_Reporting/Reports/PendingForeignExchange";
reportURL[12009] = "/ERS_Reporting/Reports/NetSettlement"; 
reportURL[12010] = "/ERS_Reporting/Reports/CustodyHoldingsCIW";
reportURL[12013] = "/ERS_Reporting/Reports/ProjectedCashWorksheet";
reportURL[12014] =...