JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<table id="DiscountCalculatorTable" class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
    <thead>
      <tr>
        <th class="mesurementColTitle" scope="col">Nominal Pipe Size (mm/in)</th>
        <th class="mesurementColTitle" scope="col">1"</th>
        <th class="mesurementColTitle" scope="col">1 1/2"</th>
        <th class="mesurementColTitle" scope="col">2"</th>
        <th class="mesurementColTitle" scope="col">2 1/2"</th>
        <th class="mesurementColTitle" scope="col">3"</th>
        <th class="mesurementColTitle" scope="col">3 1/2"</th>
        <th class="mesurementColTitle" scope="col">4"</th>
        <th class="mesurementColTitle" scope="col">#</th>
        <th class="mesurementColTitle" scope="col">Bands</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mesurementRowTitle" data-label="Nominal Pipe Size (mm/in)">15/1/2"</td>
        <td class="mesurementRowTitle" data-label="1"">1</td>
        <td class="mesurementRowTitle" data-label="1 1/2"">3</td>
        <td class="mesurementRowTitle" data-label="2"">5</td>
        <td class="mesurementRowTitle" data-label="2 1/2"">7</td>
        <td class="mesurementRowTitle" data-label="3"">8</td>
        <td class="mesurementRowTitle" data-label="3 1/2"">9</td>
        <td class="mesurementRowTitle" data-label="4"">10</td>
        <td class="mesurementRowTitle" data-label="#">1</td>
        <td class="pricefield" data-label="Bands">10.55</td>
      </tr>
      <tr class="trNewPriceFields" style="display: none;">
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td class="newpricefield">.</td>
      </tr>
      <tr>
        <td class="mesurementRowTitle" data-label="Nominal Pipe Size (mm/in)">20/3/4"</td>
        <td class="mesurementRowTitle" data-label="1"">1</td>
        <td...