JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test Case</title>
  </head>
  <body>
      <div class="left2_100 comment_about">
      <label for="comment_about">Title</label>
    </div>

    <select id="comment_about" name="comment_about">
      <option value="">
        - Select a title -
      </option>
      
      <option value="Tools, Equipment, and Resources – p16">
        Tools, Equipment, and Resources – p16
      </option>
      <option value="DACUM Chart – p20">
        DACUM Chart
      </option>
    </select>
    <div class="spacer">
       
    </div>
    <div class="left2_100 duty">
      <label for="duty"><span class="redAsterisk">*</span>Duty</label>
    </div>
    <div class="left2lower duty">
      <select id="duty" name="duty">
        <option value="">
          - Select a duty -
        </option>
        <option value="A: Developing Strategic Plans">
          A: Developing Strategic Plans
        </option>
        <option value="B: Performing Site Audits">
          B: Performing Site Audits
        </option>
        <option value="C: Performing Energy and Sustainability Accounting and Analysis ">
          C: Performing Energy and Sustainability Accounting and Analysis
        </option>
        <option value="D: Improving Energy Efficiency and Sustainability ">
          D: Improving Energy Efficiency and Sustainability
        </option>
        <option value="E: Communicating with Others">
          E: Communicating with Others
        </option>
      </select>
    </div>
    <div class="spacer duty">
       
    </div>
    <div class="left2_100 task">
      <label for="task">Task</label>
    </div>
    <div class="left2lower task">
      <select id="task" name="task">
        <option value="">
          - Select a task -
        </option>
      </select>
    </div>
    <div class="spacer task">
       
    </div>
    <div class="left2_100 step">
      <label for="step">Step</label>
    </div>
 ...

JavaScript

$('body').data('duties',{"B_TASK":{"TASKS":{"7_STEPS":["a: Evaluate results","b: Select measures","c: Develop implementation plan","d: Distribute plan"],"3_STEPS":["a: Inventory equipment","b: Evaluate flow rates","c: Perform leak detection","d: Compile usage ","e: Gather usage data","f: Analyze data","g: Create baseline","h: Determine rates","i: Analyze quality","j: Evaluate systems","k: Create list"],"6_STEPS":["a: Evaluate impacts","b: Evaluate impacts","c: Evaluate operational impacts","d: Evaluate community impacts","e: Evaluate health impacts","f: Evaluate impacts to occupants","g: Determine recognition opportunities"],"2_STEPS":["a: Inventory  consuming equipment","b: Evaluate system efficiency","c: Detect leaks (e.g., water, steam, air)","d: Prepare capital replacement list","e: Analyze rate structure","f: Review consumption usage","g: Review consumption costs","h: Analyze consumption trends","i: Create inventory schedule","j: Allocate consumption","k: Interview occupants","l: Interview staff","m: Install recording equipment","n: Record measurements","o: Analyze consumption data","p: Review control system","q: Evaluate building envelope","r: Create opportunities list"],"5_STEPS":["a: Identify opportunities","b: Calculate savings","c: Perform lifecycle cost analysis","d: Prioritize  and  opportunities"],"1_STEPS":["a: Evaluate landscaping techniques","b: Evaluate exterior lighting for light pollution","c: Evaluate building and hardscape management practices","d: Evaluate management practices","e: Evaluate management practices","f: Evaluate building envelope","g: Evaluate indoor quality","h: Evaluate thermal comfort","i: Evaluate filtration systems","j: Evaluate cleaning program","k: Review purchasing records","l: Generate action item list","m: Identify  opportunities"],"4_STEPS":["a: Determine waste sources","b: Collect representative waste stream","c: Determine consistency of waste stream","d: Coordinate collection with janitorial staff","e: Segregate...