JSFiddle - React, Tailwind, and code Playground

HTML

<div id="schedule">

  <table border='1' cellspacing='0' cellpadding='5'><tbody><tr><th></th><th>22oz Dark</th><th>12ct 4oz Dark</th></tr><tr><th>2016-01-01</th><td class="">9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td class="">8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td class="">13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td class="">14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td class="">13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td class="">16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td class="">15421</td><td>3100</td></tr></tbody></table> 
  <div id="new"></div>

</div>

CSS

.highlight { background-color:#aaa; }
table { border-collapse:collapse; cursor:default; }

JavaScript

$("td").hover(
  function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
  },function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
  }
);