JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<th>Date 1</th>
<th>Date 2</th>
<th>Date 3</th>
<th>Date 4</th>
<th>Date 5</th>
<th>Date 6</th>
</tr>
<tr>
<td>Name 1</td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
</tr>
<tr>
<td>Name 2</td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
</tr>
<tr>
<td>Name 3</td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
<td><a href="#" class="assign">Assign Task</a></td>
</tr>
</table>
<p class="result"></p>
CSS
table { border-collapse: collapse; }
table td, table th{ padding:5px; border:3px solid #fff;}
table tr:nth-child(odd) { background-color:#eee; }
table tr:nth-child(even) { background-color:#ccc; }
table th { font-family: Georgia, Times, "Times New Roman", serif; }
table td { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; }
table td a { display:inline-block; padding:5px 10px; margin:5px; background:#fff; color:red; }
JavaScript
$('.assign').on("click", function(e){
e.preventDefault();
var $idx = $(this).parent().index(); // get the index
var $th = $('table th'); // table heading
var $date = $th.eq($idx).text(); // get the date by the index
var $resource = $(this).parents('tr').find("td:first-child").text(); // find the first td in the tr for the resource name.
// append the date and resource to a paragraph tag.
$('.result').text("Date : " + $date + " : " + $resource);
});