$(document).ready(function(){
  // We want this to work for every table on the page
  $('table').each(function(){
    const table = $(this);
    // Get all of the table headings
    const topCells = table.find('tr:first-child th');
    // Get the bottom rows
    const bottomRows = table.find('tr:not(:first-child)');
    // We need to insert a label in each cell of a column, so we start from the heading
    topCells.each(function(index){
      // We don't care about the top-left cell—it doesn't label the cells beneath it
      if (index != 0) {
        const headerCell = $(this)
        const headerIndex = index;
        // Get the item name from the cell
        const itemName = headerCell.text();
        // Set the cell's data-item to the item name (useful later)
        $(this).data('item', itemName);
        // Now we need to label the appropriate cell on each line
        bottomRows.each(function(index){
          // Find the right cell (the index is one lower because of the <th> at the start)
          const cell = $($(this).find('td')[headerIndex - 1]);
          // Set that cell's data-item to the same item name
          cell.data('item', itemName);
          // Create an HTML element with the item name
          const itemEntry = `<p class="item">${itemName}</p>`
          // Append it to the cell (we hide it with CSS)
          cell.append(itemEntry);       
        });
      }
    })
    // Find the heading of each row
    const rowHeads = bottomRows.find('th');
    rowHeads.each(function(){
      // Add an empty <p> that we'll populate later
      $(this).append('<p class="value"></p>');
    });
  })
  // Event handler for clicking on cells
  $('td').click(function(){
    // Unselect everything
    $('td').removeClass('selected');
    // Select this cell
    $(this).addClass('selected');
    // Find the item this cell represents
    const itemName = $(this).data('item');
    // Find the cell's parent table
    const table = $(this).closest('table');
    // Find that table's bottom rows
    const bottomRows = table.find('tr:not(:first-child)');
    bottomRows.each(function(){
      const row = $(this);
      // Find all the cells in the row
      const itemCells = row.find('td');
      itemCells.each(function(){
        // Find the cell in question's item
        const thisItem = $(this).data('item');
        // If it's the same as the item we clicked
        if (thisItem == itemName) {
          // Select it
          $(this).addClass('selected');
          // Set the row's value label to that amount
          const thisValue = $(this).text();
          row.find('.value').text(thisValue);
        }
      });
    });                                          
  });
});