JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table id="scores" width="358" border="1">
  <tbody id="recentActivities">
  <tr>
    <th colspan="3">Recent Activities</th>
  </tr> 
  <tr class="header">
    <td width="104">Title</td>
    <td width="69">Result</td>
    <td width="163">Action</td>
  </tr>
  <tr>
    <td class="title">Activity 1</td>
    <td class="result">100</td>
    <td class="action"><button class="copy">Copy</button></td>
  </tr>
  <tr>
    <td class="title">Activity 2</td>
    <td class="result">300</td>
    <td class="action"><button class="copy">Copy</button></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  </tbody>
  <tbody id="copiedActivities">
  <tr>
    <th colspan="3">Projections</th>
  </tr> 
  <tr class="header">
    <td>Title</td>
    <td>Result</td>
    <td>Action</td>
  </tr>
  </tbody>
</table>

CSS

#scores tr.header {
  background-color: #c0c0c0;
}

#scores th,
#scores td {
  padding: 3px;
}

#scores th {
  background-color: #006699;
  color: #FFF;
}

JavaScript

var $copiedActivities = $("#copiedActivities");
$("#scores").on('click', "button.copy", function() {
  var clone = $(this).closest("tr").clone(true).appendTo($copiedActivities);
})