JSFiddle - React, Tailwind, and code Playground

by ArktekniK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="_tableDynamic"></div>
<table class="table table-striped table-condensed">
  <thead>
    <tr style="font-weight: bold;">
      <td colspan="2">Item</td>
      <td>Unit</td>
      <td id="#date-col-0"></td>
      <td id="#date-col-1"></td>
      <td id="#date-col-2"></td>
      <td id="#date-col-3"></td>
      <td id="#date-col-4"></td>
      <td id="#date-col-5"></td>
      <td id="#date-col-6"></td>
    </tr>
  </thead>
  <thead></thead>
  <tbody>
    <tr>
      <td rowspan="3" id="group-man">Man</td>
      <td class="age-bracket-male-first">
        <span class="age-bracket-num">0-100</span>
        <span class="age-bracket-new glyphicon glyphicon-plus-sign pull-right"
          data-target="#group-man"
          data-num-brackets="1"></span>
      </td>
      <td>Person</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Other</td>
      <td>Person</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Not Set</td>
      <td>Person</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <td rowspan="3" id="group-woman">Woman</td>
      <td class="age-bracket-female-first">
        <span class="age-bracket-num">0-100</span>
        <span class="age-bracket-new glyphicon glyphicon-plus-sign pull-right"
           data-target="#group-woman"
           data-num-brackets="1"></span>
      </td>
      <td>Person</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     ...

JavaScript

var ageBrackets = [
  [0, 10],
  [11, 20],
  [21, 30],
  [31, 40],
  [41, 50],
  [51, 60],
  [61, 70]
];

var maximumAge = 100;
var minimumAge = 0;

var maximumOccupancy = 50;

var ageTextBrackets = ageBrackets.map(function(bracket) {
  return bracket.join('-');
});

var genderTextBrackets = ['Man', 'Woman', 'Other', 'Not Set'];
 /*
function tableCreator(res, selector) {
  var table = $('<table class="table table-striped table-condensed"><thead><tr><td colspan="2">Item</td><td>Unit</td></tr><thead><tbody></tbody>');
  var tbody = table.find('tbody');

  function createMultiRow(key, values, unit) {
    var head = $(`<tr><td rowspan="${values.length}">${key}</td><td>${values[0]}</td><td>${unit}</td></tr>`);

    tbody.append(head);

    values.slice(1).forEach(function(bracket) {
      $(`<tr><td>${bracket}</td><td>${unit}</td></tr>`).appendTo(tbody);
    });
  }

  createMultiRow('Man', ageTextBrackets, 'Person');
  createMultiRow('Woman', ageTextBrackets, 'Person');
  table.append(`<tr class="total"><td colspan="2">Sum</td><td>Person</td></tr>`)
  table.append(`<tr class="max"><td colspan="2">Maximum</td><td>${maximumOccupancy}</td></tr>`)
  table.append(`<tr class="occupancy"><td colspan="2">Occupancy</td><td>Percentage</td></tr>`)

  // Loops through each summary
  res.forEach(function(column) {
    // Find all the last column cells
    var finalCol = $(table).find('tr td:last-child').toArray();
    // Put the date next to the first one
    var first = finalCol.shift();
    $(first).after(`<td>${column.date.split('T')[0]}</td>`);

    // Add empty cells...should put the appropriate data in. 
    // Think this should have been called with a selector that matches Male:0-10 etc.
    finalCol.forEach(function(rowCell) {
      $(rowCell).after(`<td></td>`);
    });
  });
  table.find('tr:first').css('font-weight', 'bold');
  $(selector).append(table);
}*/

$('td').on('click', 'span.age-bracket-new', generateAgeBracket);

function generateAgeBracket() {
	let source =...