JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" class="tableClass">
 <thead>
  <tr>
    <th>first</th>
    <th>second</th>
    <th>third</th>
    <th>fourth</th>
    <th>fifth</th>
    <th>sixth</th>
    <th>seventh</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
   <td>6</td>
   <td>7</td>
  </tr>
     <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
   <td>6</td>
   <td>7</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="7">Footer</td>
  </tr>
 </tfoot>
</table>

<select multiple="multiple" class="table-column-selector">
 <option value="1" selected="selected">first</option>
 <option value="2" selected="selected">second</option>
 <option value="3" selected="selected">third</option>
 <option value="4" selected="selected">fourth</option>
 <option value="5" selected="selected">fifth</option>
 <option value="6" selected="selected">sixth</option>
 <option value="7" selected="selected">seventh</option>
</select>

JavaScript

$(document).ready(function(){

    $(".table-column-selector").change(function(){
        var selectedCols = $(this).val();
        var cols = $("table.tableClass thead th").length;
        
        var footer = $("table.tableClass tfoot tr td");
                       
        footer.attr("colspan", selectedCols.length);
        
        for (col = cols - 1 ; col >= 0 ; col--) {
            var columns = $("table.tableClass tbody tr td:nth-child(" + (col + 1) + ")");
            var headers = $("table.tableClass thead tr th:nth-child(" + (col + 1) + ")");

            if ($.inArray( col + 1 + "", selectedCols ) != -1) {
               columns.show();
               headers.show();
            }
            else {
                columns.hide();
                headers.hide();
            }
        }
    })
});