JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
   <tr>
     <th>Make</th>
     <th>Model</th>
     <th>Color</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>Acura</td>
     <td>NSX</td>
     <td>Red</td>
   </tr>
   <tr>
     <td>Ford</td>
     <td>Viper</td>
     <td>Black</td>
   </tr>
   <tr>
     <td>Dodge</td>
     <td>Charger</td>
     <td>Blue</td>
   </tr>
  </tbody>
</table>

CSS

table thead tr th {
  background-color: #A6BFD9;
  border: 1px solid black;
  padding: 4px;
  width:100px;
}

table tbody tr td {
  color: #3D3D3D;
  border: 1px solid black;
  padding: 4px;
}

.temp { margin:.2em 0; }
.text { display:block;margin:1em 0 .2em 0; }
.highlight { background-color: #ffff80; }

JavaScript

function resetColumnSelection() {
    $(".temp, .text").remove();
    $(".highlight").removeClass("highlight");
}

$("th").click(function() {
   resetColumnSelection();
   var colData = "";

   $th = $(this);
   var colIndex = $th.index();
   $th.parents("table").find("tbody tr").each(function() {
      var $columnCell = $(this).children("td:eq(" + colIndex + ")");
      colText = $.trim($columnCell.text());
      $columnCell.addClass("highlight");
      if(colText > "") colData += ((colData > "")? ", " : "") + colText;
   });

   $("<span class='text'>Text from Selected Column:</span>" + 
     "<input type='text' class='temp' />")
       .val(colData)
       .insertAfter($th.parents("table"))
       .focus()
       .select();
});