JSFiddle - React, Tailwind, and code Playground

by Ganesh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="responsive table tablesorter tablesorter-default" id="fc_dsaTable" role="grid" border="1">
<thead><tr>
<th><input class="cbox1e" type="checkbox"></th>  
<th>Issue Date</th>
<th>Format</th>  
</tr></thead>		

		<tbody>

			
				<tr class="selectDocumentRow" role="row">
					<td><input id="cbox1a" class="xlscase" name="chkbx" type="checkbox" value="2017-02-25" data-docId="doc1" data-docName="file1" data-docDate="25/02/2017" data-docType="settlement"></td>
<td>25/02/2017</td>
<td><img src="/nextgenstorefront/_ui/desktop/theme-shell/images/shell/excel.png" alt="Pdf" title="Pdf"></td></tr>
			

				<tr class="selectDocumentRow" role="row">
					<td><input id="cbox1a" class="xlscase" name="chkbx" type="checkbox" value="2017-02-29" data-docId="doc2" data-docName="file2" data-docDate="29/02/2017" data-docType="settlement"></td>
<td>29/02/2017</td>
<td><img src="/nextgenstorefront/_ui/desktop/theme-shell/images/shell/excel.png" alt="csv" title="csv"></td></tr>


<tr class="selectDocumentRow" role="row">
					<td><input id="cbox1a" class="xlscase" name="chkbx" type="checkbox" value="2017-02-17" data-docId="doc3" data-docName="file3" data-docDate="17/02/2017" data-docType="settlement"></td>
<td>17/02/2017</td>
<td><img src="/nextgenstorefront/_ui/desktop/theme-shell/images/shell/excel.png" alt="Pdf" title="Pdf"></td></tr>



<tr class="selectDocumentRow" role="row">
					<td><input id="cbox1a" class="xlscase" name="chkbx" type="checkbox" value="2017-02-22" data-docId="doc4" data-docName="file4" data-docDate="22/02/2017" data-docType="settlement"></td>
<td>22/02/2017</td>
<td><img src="/nextgenstorefront/_ui/desktop/theme-shell/images/shell/excel.png" alt="Pdf" title="Pdf"></td></tr>
		</tbody>
	</table>
  <br/>
  
  <button class="primary billing_downloadLink" type="primary" id="downlaodDoc">
				Download</button>

JavaScript

var digitalData=[]; 

digitalData={"page":{"name":"","section":"","country":"TH","language":"th"},"user":{"id":"zVUxKnlIldGRiKGelrT6NQ==","status":"logged_in","cob":["nexgen-shell-COB:rdo-1"],"role":["nextgen-shell-role:retailer"],"companyName":"shell","companyId":"0011095971","persona":"retailer","lineOfBusiness":"retail","operationUnit":"th"},"version":"1.0"};
digitalData.trackEvent=function(){};


$("#downlaodDoc").click(function(){
var documents=[];
digitalData.documents=[];
$.each($(document.body).find("input[name=chkbx]:checkbox:checked"), function () {
			documents.push(
                        {
            "id": $(this).attr('data-docId'),
            "name":$(this).attr('data-docName'),
            "type":$(this).attr('data-docType'),
            "publishDate":$(this).attr('data-docDate')
        }

                        
                        
                        );
								  });
                  //documents.push(selectedDocs);
                 
                  
// Update the data layer
			$.extend(true, digitalData,{ 
			documents}); 
 console.log(digitalData);       
});