JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="losSection" id="secReviewerDemographics"><div class="losSectionHeader"><div class="losSectionSel losSectionTitle misign" data-originaltitle="Demographics">Demographics</div></div><div id="cpC_kf_secview_50" class="losSectionView"><div>




   <div id="ExportDetails" class="sample">

      <div class="tabularView">

         <input type="hidden" name="kaf_78" id="kaf_78" aria-label="kaf_78" value="01" class="._shCE"> 

         <div id="cpC_ctl73" class="tabularTbl flex-row start-xs">
		 
		 

           <div class="pad1x flex-row leftLblMode">

               <div class="pad1x flex-col-xs-12 flex-col-sm-6">

                  <div style="">

                     <label for="kaf_70" id="klb_70" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">First Name

                     </label>

                  </div>

               </div>

               <div class="pad1x flex-col-xs-12 flex-col-sm-6">

                  <div class="labelValueField">

                     <span class="labelValue" name="kaf_70" id="kaf_70">

                        <span class="labelValue" name="kaf_70" id="kaf70" aria-label="Applicant First Name">NAMA</span>

                     </span>

                  </div>

               </div>

            </div>

           

            <div class="pad1x flex-row leftLblMode">

               <div class="pad1x flex-col-xs-12 flex-col-sm-6">

                  <div style="">

                     <label for="kaf_72" id="klb_72" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Last Name

                     </label>

                  </div>

               </div>

               <div class="pad1x flex-col-xs-12 flex-col-sm-6">

                  <div class="labelValueField">

                     <span class="labelValue" name="kaf_72" id="kaf_72">

                       ...

JavaScript

let alllabels = $('label')
let positions = []
let requiredColumns = ['First Name','Last Name']
for(let i=0;i<alllabels.length;i++) {
    for(let j=0;j<requiredColumns.length;j++){
       if(alllabels[i].innerText == requiredColumns[j]) positions.push(i)
    }
}
let csv = $('.sample').map((i, sample) => {
	return $(sample).find('span > .labelValue').map((_, field) =>{ console.log(_); if(positions.indexOf(_)!=-1) return field.innerText} ).get().join(',');
}).get();
csv.unshift(requiredColumns.join(',')); // add headers
createCsvFile(csv);

function createCsvFile(csvArray) {
  let file = new Blob([csvArray.join('\r\n')], {
    type: "application/csv"
  });

  let url = URL.createObjectURL(file);
  let a = $("<a />", {
    href: url,
    download: "filename.csv"
  }).appendTo("body").get(0).click();
}