JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th class="Title">ID</th>
        <th class="Title">Color</th>
        <th class="Title">Number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>#990000</td>
        <td>C001</td>
    </tr>
    <tr>
        <td>2</td>
        <td>#009900</td>
        <td>C002</td>
    </tr>
    <tr>
        <td>3</td>
        <td>#FFFFFF</td>
        <td>C003</td>
    </tr>
    <tr>
        <td>4</td>
        <td>#000000</td>
        <td>C004</td>
    </tr>
</table>

CSS

.visible, .stay-visible {
    display: table-cell;
}
th, td {
    display: none;
}

JavaScript

// Code goes here

$(document).ready(function(){
    
    $('table td, table th').addClass('visible'); 
    
    $('table').append('<tr class="last-row" />').each(function(){
         $('table tr:first-child th').each(function(){
    
    
          $('.last-row').append('<td class="stay-visible"><button class="show-hide-btn">Hide</button></td>');
        });
    
    });
    
    
    // Then manage it
    $(document).on('click', '.show-hide-btn', function(){
       var parentIndex = $(this).parent().index()+1;
       
       var $currentColumn = $('table td:nth-child('+parentIndex+'), table th:nth-child('+parentIndex+')'); 
    
       if($currentColumn.hasClass('visible')){
          $(this).text('Show');
    
       }
       else {
          $(this).text('Hide');
       }
        $currentColumn.each(function(){
            $(this).toggleClass('visible')
        });
    });


});