JSFiddle - React, Tailwind, and code Playground

HTML

<body><div id="page">
<form action="#" method="post">

<br>
<button id="b0" class="link" name="tab" value="0">Food by Category</button><button id="b1" class="link" name="tab" value="1">Food Alphabetical</button><button id="b2" class="link" name="tab" value="2">Pollen</button><button id="b3" class="link" name="tab" value="3">Environmental</button><button id="b4" class="link" name="tab" value="4">Chemical</button><button id="b5" class="link" name="tab" value="5">Panels</button><button id="b6" class="link" name="tab" value="6">Review</button>

<div class="col">
 <div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0571" class="chk" name="aS0571" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0573" class="chk" name="aS0573" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0572" class="chk" name="aS0572" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Ammonium Persulfate</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0211" class="chk" name="aS0211" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0213" class="chk" name="aS0213" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0212" class="chk" name="aS0212" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Amoxicillin</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0281" class="chk" name="aS0281" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0283" class="chk" name="aS0283" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0282" class="chk" name="aS0282" value="2" /><span></span></label></div>
<div...

CSS

body{width:100%;font:100 0.9em Arial,sans-serif;margin:0;color:#004;padding:0;background:#f7f7fb;}
#page{margin:0 auto;padding:1em 0 1em 10px;border:0;min-width:1120px;max-width:1120px;background:#f7f7fb;}
.bold{font-weight:700;}
form,button,.inline{display:inline;}
.small{font-size:.9em;}
.right{text-align:right;}
.center{text-align:center;margin:0 auto;}
.left,.selected{text-align:left;}
.selected{color:#0f0;}
.break{clear:both;}
table{padding:0;margin:0;display:inline-block;min-width:200px;}
td,tr{padding:0;margin:0;}
.link{width:16%;font:700 1em Arial,sans-serif;cursor:pointer;padding:6px 0 6px 7px;border:1px solid #69B5B3;color: #fff;background-color:#144;font-weight:700;
      background: linear-gradient(to bottom, rgba(0,0,255,1) 0%, rgba(0,0,64,1) 100%);}.dchk{font:700 .8em Arial,sans-serif;display:inline-block;padding:0;margin:0;vertical-align: middle;position: relative;}
pre{padding:0;margin:0;color:#333;}
#alpha{margin-left:1em;width:15em;}
.alert{background:#f00;color:#fff;}
.col{columns: 4 auto;margin:20px 0 0 0;letter-spacing: -.35px;}
.cat{margin:2px 0 0 82px;font:700 1.1em Arial;display:inline-block;}
.gray{color:#aaa;}
table{}
caption{font:700 1em Arial;text-align: left;}
.row{margin:0;padding:0;}
.cap{font:700 1em Arial,sans-serif;margin: 0 0 2px 2.5em;}
.cat{}
.none{margin:0 0 0 4.3em;font:400 .7em Arial,sans-serif;}
.dchk{font:700 .8em Arial,sans-serif;display:inline-block;padding:0;margin:0;vertical-align: middle;position: relative;}
.dchk{text-align:left;}
.chk {margin: 0;display: inline-block;height:0;cursor: pointer;position: relative;}
.chk > span {color: #fff; padding: 0; margin:0; height:0; display: inline-block;}
.chk > input {height: 1.3em;width: 1.5em;margin:0 1px 0 1px;padding:4px 0 0 0 ;appearance: none; border: 1px solid #000;border-radius: 4px;outline: none;transition-duration: 0.4s;cursor: pointer;}
.chk > input:checked {border: 1px solid #000;}
.chk > input:checked + span::before {font-weight:700;content: '✓';color: #fff;...

JavaScript

const tab = 4;
document.getElementById('b' + tab).style.display = 'none';
const dc = ['S057','S021','S028','S058','S024','S042','S029','S013','S003','S072','S079','S034','S027','S082','S017','S085','S087','S093','S002','S015','S018','S090',]
for (id in dc){
   document.getElementById(dc[id] + '2').disabled = true;
   document.getElementById(dc[id] + '3').disabled = true;
}

var elements = document.querySelectorAll(".g  > input[id^=S] + span")
elements.forEach(element=>{
console.log(element)
  element.className += " dim"
})
var elements = document.querySelectorAll(".g4  > input[id^=S] + span")
elements.forEach(element=>{
console.log(element)
  element.className += " dim"
})