JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

	<!--<button  onclick="tablesToExcel( [{ 'sheet': 'firstsheet','tables' : ['tbl1','tbl2']},{ 'sheet': 'secondsheet','tables' : ['tbl5']}], 'TestBook.xls', 'Excel')">Export to Excel</button> -->
	<!-- button  onclick="">Export to Excel</button> -->
	<button  >Export to Excel</button>

	<table id="tbl1" class="table2excel">
	<thead>
	<tr>

	<th data-style="Header">Product</th>
	<th data-style="Header">Price</th>
	<th data-style="Header">Available</th>
	<th data-style="Header">Count</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td data-style="Changed">Bred</td>
	<td data-style="Missed">1
	</td>
	<td>037.57834600204239857
	</td>
	<td data-style="Header">3
	</td>
	</tr>
	<tr>
	<td>Butter</td>
	<td>4
	</td>
	<td>5
	</td>
	<td >6
	</td>
	</tr>
	</tbody>
	</table>
	<hr>

	<table id="tbl2" class="table2excel">
	<thead>
	<tr>
	<th>Product</th>
	<th>Price</th>
	<th>Available</th>
	<th>Count</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Bred</td>
	<td>7.5
	</td>
	<td>8
	</td>
	<td>9
	</td>
	</tr>
	<tr>
	<td>Butter</td>
	<td>14
	</td>
	<td>15
	</td>
	<td >16
	</td>
	</tr>
	</tbody>
	</table>

	<table id="joined" class="table2excel">
	<thead>
	<tr></tr>
	</thead>
	<tbody>
	</tbody>
	</table>

JavaScript

$('button').click(function() {
tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')

});  
  
  var tablesToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
    , tmplWorkbookXML = '<?xml version="1.0" encoding="windows-1252"?><?mso-application progid="Excel.Sheet"?>'
	  + '	<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"  xmlns:html="http://www.w3.org/TR/REC-html40">'
    + '		<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">'
	  + '			<Author>Qompare</Author>'
	  + '			<Created>{created}</Created>'
	  + '		</DocumentProperties>'
    + '		<Styles>'
	  + '			<Style ss:ID="Default" ss:Name="Normal">'
	  + '				<NumberFormat ss:Format=""/>'
	  + '			</Style>'
	  + '			<Style ss:ID="Header">'
	  + '				<Alignment ss:Vertical="Bottom"/>'
    + '				<Borders>'
	  + '					<Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Right"/>'
	  + '					<Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Left"/>'
	  + '					<Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Top"/>'
	  + '					<Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Bottom"/>'
    + '				</Borders>'
	  + '				<Font ss:FontName="Calibri" ss:Size="12" ss:Color="#000000"/>'
	  + '				<Interior ss:Color="#cccccc" ss:Pattern="Solid" />'
	  + '				<NumberFormat/>'
	  + '				<Protection/>'
	  + '			</Style>'
    + '			<Style ss:ID="Changed">'
	  + '				<Borders/>'
	  + '				<Font ss:Color="#ff0000"></Font>'
	  + '				<Interior ss:Color="#99CC00" ss:Pattern="Solid"></Interior>'
	  + '				<NumberFormat/>'
	  + '				<Protection/>'
	  + '			</Style>'
    + '			<Style ss:ID="Missed">'
	  + '				<Borders/>'
	  + '				<Font ss:Color="#ff0000"></Font>'
	  +...