JSFiddle - React, Tailwind, and code Playground

HTML

<button id='hide_column'>Hide column 3</button>
<button id='show_column'>Show column 3</button>

<table>
</tbody>
    <tr>
        <td>column 1 </td>
        <td>column 2 </td>
        <td>column 3 </td>
        <td>column 4 </td>
        <td>column 5 </td>
        <td>column 6 </td>
    </tr>
    <tr>
        <td>column 1 </td>
        <td>column 2 </td>
        <td>column 3 </td>
        <td>column 4 </td>
        <td>column 5 </td>
        <td>column 6 </td>
    </tr>
    </tbody>
</table>

JavaScript

var myStyle = 'td:nth-child(column_index){display:none;}', 
    $myStyleElement = $(document.createElement('style'));
    
$myStyleElement.attr('id', 'dynamic_style');
$('head').append($myStyleElement);

$('#hide_column').click(function(e){
    $('style#dynamic_style').html(myStyle.replace('column_index', '3'));
});

$('#show_column').click(function(e){
    $('style#dynamic_style').html('');
});

debugger;
alert('Row count:' + $('table > tbody > tr').length)