JSFiddle - React, Tailwind, and code Playground

by mircea s

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

JavaScript

$(function(){
  var frgmntDteXML,
   serverResponse = '<?xml version="1.0" encoding="utf-8"?>' +
'<upkeepList> ' + '<upkShare month_year="11_16-12_16" post_dte="01-20-17" due="02-04-17">' +
    '<wtrIdx month="01-17">513</wtrIdx>' + '<OpngBlnce>22</OpngBlnce>' + '<UndvIntrstExpns> </UndvIntrstExpns>' +
    '<mnthCrrntAmnt>77</mnthCrrntAmnt>' + '<Rcpt dte="01-26-17" No="5725">' + '<amnt>22</amnt>' + '<descrpt>"11/16" upkeep </descrpt>' +
	'</Rcpt>' + '<Rcpt dte="01-26-17" No="5726">' + '<amnt>41</amnt>' + '<descrpt>"12/16" upkeep </descrpt>' + '</Rcpt>' + '</upkShare>' +

 '<upkShare month_year="01_17-02_17" post_dte="03-17-17" due="04-03-17">' + '<wtrIdx month="02-17">519</wtrIdx>' + '<OpngBlnce></OpngBlnce>' +
   '<UndvIntrstExpns></UndvIntrstExpns>' + '<mnthCrrntAmnt>43</mnthCrrntAmnt>' + '<Rcpt dte="03-30-17" No="5783">' + '<amnt>50</amnt>' +
	 '<descrpt>"01/17-02/17" upkeep</descrpt>' + '</Rcpt>' + '</upkShare>' +
 
 '<upkShare month_year="03-17" post_dte="04-16-17" due="05-02-17">' + '<wtrIdx month="03-17">523</wtrIdx>' + '<!--<OpngBlnce></OpngBlnce>-->' +
    '<UndvIntrstExpns></UndvIntrstExpns>' + '<mnthCrrntAmnt>45</mnthCrrntAmnt>' + '<Rcpt dte="05-10-17" No="5815">' + '<amnt>50</amnt>' +
	 '<descrpt>"03/17-04/17" upkeep</descrpt>' + '</Rcpt>' + '</upkShare>' +

 '<upkShare month_year="04_17-05_17" post_dte="06-05-17" due="06-30-17">' + '<wtrIdx month="04-17">523</wtrIdx>' + '<OpngBlnce></OpngBlnce>' +
  '<UndvIntrstExpns></UndvIntrstExpns>' + '<mnthCrrntAmnt>64</mnthCrrntAmnt>' + '<Rcpt dte="06-14-17" No="5858">'+ '<amnt>57</amnt>' +
   '<descrpt>"05/17" upkeep</descrpt>' + '</Rcpt>' + '</upkShare>' +

'<upkShare month_year="06_17" post_dte="07-16-17" due="07-30-17">' + '<wtrIdx month="05-17">524</wtrIdx>' + '<OpngBlnce></OpngBlnce>' +
  '<UndvIntrstExpns></UndvIntrstExpns>' + '<mnthCrrntAmnt>41</mnthCrrntAmnt>' + '<Rcpt dte="07-28-17" No="5948">' + '<amnt>50</amnt>' +
   '<descrpt>"06/17" upkeep</descrpt>' + '</Rcpt>' + '</upkShare>' + 
 
 '<upkShare...