JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all_issues">
  <h3>
    <div class="progress_bar" id="issue0">IT Support<div class="percent" style="float: right;" id="it_total" data-percent="">50%</div></div>
  </h3>
  <div>
    <table class="projects" id="it_issues">
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue1" data-percent="50">Web camera for nick</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue2" data-percent="60">Server Status Log Report</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue3" data-percent="65">Running Out Of IPs</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue4" data-percent="99">Create a map of all the computers and printers in the building</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
    </table>
  </div>
  <h3><div class="progress_bar" id="issue10">Website<div class="percent" style="float: right;" id="website_total" data-percent="">80%</div></div></h3>
  <div>
    <table class="projects" id="website_issues">
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue11" data-percent="100">issue11</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="loading_bar">
            <div class="progress_bar" id="issue12" data-percent="60">issue12</div>
          </div>
          <div class="percent">
          </div>
        </td>
      </tr>
      <tr>
        <td>
         ...

CSS

.projects {
  width: 100%;
  font-size: 14px;
}

.loading_bar {
  width: 94%;
  float: left;
  border: solid 1px black;
}

.percent {
  float: left;
}
#issue0{
  width: 69%;
  background-color: #D2F5B0;
}
#issue10{
  width: 81%;
  background-color: #D2F5B0;
}
#issue1 {
  width: 50%;
  background-color: #C2DFFF;
}

#issue2 {
  width: 60%;
  background-color: #E3B7EB;
  white-space: nowrap;
}

#issue3 {
  width: 65%;
  background-color: #E3B7EB;
  white-space: nowrap;
}

#issue4 {
  width: 99%;
  background-color: #FCBDBD;
  white-space: nowrap;
}

#issue11 {
  width: 100%;
  background-color: #C2DFFF;
}

#issue12 {
  width: 60%;
  background-color: #E3B7EB;
  white-space: nowrap;
}

#issue13 {
  width: 65%;
  background-color: #E3B7EB;
  white-space: nowrap;
}

#issue14 {
  width: 99%;
  background-color: #FCBDBD;
  white-space: nowrap;
}

JavaScript

function get_percentages(on_table_row, total_width) {
  $(on_table_row).each(function() {
    var width = on_table_row.find(".progress_bar").css("width");
    /* alert(on_table_row.html()); */
    var current_progress = (width / total_width).toFixed(2) * 100;
    $(this).find(".percent").text(current_progress + "%");
  });
}

$(document).ready(function() {
  $('#all_issues').accordion({
    collapsible: true,
    heightStyle: "content",
  });
  $('#all_issues .ui-accordion-content').show();
  total_width = $(".loading_bar").css("width").slice(0, -2);
   
  total=0;
  count=0;
  $('#it_issues tr').each(function() {
    width = $(this).find(".progress_bar").css("width").slice(0, -2);
    current_progress = (width / total_width).toFixed(2) * 100;
    $(this).find(".percent").text(current_progress + "%");
    total = current_progress + total;
    count++;
    $("#it_total").data("percent", total);
  });
  grand_total = ($("#it_total").data("percent"))/(count*100)*100;
  $("#it_total").text(grand_total.toFixed(0) + "%");
  
  total=0;
  count=0;
  $('#website_issues tr').each(function() {
    percent = $(this).find(".progress_bar").data("percent");
    $(this).find(".percent").text(percent + "%");
    total = percent + total;
    count++;
    $("#website_total").data("percent", total);
  });
  grand_total = ($("#website_total").data("percent"))/(count*100)*100;
  $("#website_total").text(grand_total.toFixed(0) + "%");
  /*get_percentages($('#website_issues tr'),total_width);*/
});