JSFiddle - React, Tailwind, and code Playground

by Nate Armstrong

HTML

<div>
  <div id="PROG_hcm" style="order:-43;" class="dmf-program-list-item" data-codes="A_24UP|DT_BATC|D_AGS|E_GED-G|E_HIS-G|E_HOM-G|E_SO-C-T|FS_BUSI|FS_HEAL|FS_MAN-L|F_ONLI|PT_CONC|PT_MAJO">
    <div class="dmf-prog-list-top-row">
      <div class="dmf_program_type-tag">MAJOR</div> <a class="dmf-title" href="/adult-graduate-studies/business/healthcare-management-concentration">Healthcare Management Concentration</a>
      <div class="dmf-type">Concentration</div>
      <div class="dmf-department">Business</div>
    </div>
    <div class="dmf-prog-list-bottom-row"></div>
  </div>
  <div id="PROG_bvcm" style="order:7;" class="dmf-program-list-item" data-codes="A_1825|A_24UP|DT_BATC|D_TRAD|E_GED-G|E_HIS-G|E_HOM-G|E_SO-C-T|FS_BUSI|FS_MINI|F_CAMP|PT_DUAM">
    <div class="dmf-prog-list-top-row">
      <div class="dmf_program_type-tag">DUAL MAJOR</div> <a class="dmf-title" href="/campus-degrees/religion-ministry/ba-in-christian-ministries-and-business-dual-major">BA in Christian Ministries and Business (Dual Major)</a>
      <div class="dmf-type">Bachelor of Arts</div>
      <div class="dmf-department">Religion &amp; Ministry</div>
    </div>
    <div class="dmf-prog-list-bottom-row"></div>
  </div>
  <div id="PROG_ebd" style="order:7;" class="dmf-program-list-item" data-codes="A_1825|A_24UP|DT_BATC|D_TRAD|E_GED-G|E_HIS-G|E_HOM-G|E_SO-C-T|FS_BUSI|FS_EMER|FS_GOV-L|F_CAMP|PT_DUAM">
    <div class="dmf-prog-list-top-row">
      <div class="dmf_program_type-tag">DUAL MAJOR</div> <a class="dmf-title" href="/campus-degrees/business-government/ba-in-emergency-disaster-management-and-business">BA in Emergency &amp; Disaster Management and Business</a>
      <div class="dmf-type">Bachelor of Arts</div>
      <div class="dmf-department">Business &amp; Government</div>
    </div>
    <div class="dmf-prog-list-bottom-row"></div>
  </div>
  <div id="PROG_govbus" style="order:7;" class="dmf-program-list-item"...

CSS

.dmf-hide {
	display:none;
}

.dmf-program-list-item{
    border:1px solid #;
    padding:5px 0px;
}

.dmf-prog-list-top-row{
    display: flex;
    align-items: stretch;
    padding: 2px;
    background-color: cornsilk;
    margin: 5px 0px;
}

.dmf-page-results{
    display: flex;
    flex-direction: column;
}

.dmf-type,.dmf-department,.dmf_program_type-tag{
	flex: 1 0 20%;
}

.dmf-title{
	flex: 2 0 20%;
	background-color:burlywood;
}

JavaScript

var programs = document.querySelectorAll(".dmf-program-list-item");



Object.keys(programs).forEach(function (k) {
 
 if(programs[k].id == "PROG_hcm"){
		console.log(programs[k].dataset.codes); 
  }
});

/*
foreach(programs as program){
  if(program.id="PROG_hcm"){
		console.log(program.dataset.codes);  
  }
}
*/