Filtering table columns using checkboxes

Question

I have a table where I am trying to filter the columns that are shown based on whether a checkbox is checked or not. I have it working mostly except for the first column which doesn't act as expected (i.e. more is hidden than just the column). I have created a fiddle which exhibits this behaviour. As you can see, the second column is toggled as expected, but the first also removes other elements which I don't want to happen. I am not sure what is occurring as in my mind this should work. Can anyone point out where the mistake in my code is, and help me to fix it?

I am currently using this to filter (as can be seen in the fiddle):

$('#columnCheckboxes input:checkbox').on('click', function() {
    let colToHide = $('#matrixTable th').filter("." + $(this).attr("name"));
    let index = $(colToHide).index();
    $('#matrixTable').find('tr :nth-child(' + (index + 1) + ')').toggle();
});

UPDATE

Here is the html I am using:

<div>
    <div class="dropdown mb-2">
        <a class="btn btn-secondary dropdown-toggle" href="#" id="columnFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-th fa-lg"></i>
        </a>
        <div class="dropdown-menu" aria-labelledby="columnFilter" id="columnCheckboxes">
            <a class="dropdown-item" href="#"><input type="checkbox" name="1" checked />&nbsp;Delivery Orders</a>
            <a class="dropdown-item" href="#"><input type="checkbox" name="2" checked />&nbsp;Walk-in Orders</a>
        </div>
    </div>
    <table class="table table-bordered" id="matrixTable">
        <thead>
            <tr>
                <th></th>
                <th colspan="2">Event</th>
            </tr>
            <tr>
                <th>Activity</th>
                <th class="1">Delivery Orders</th>
                <th class="2">Walk-in Orders</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    Till Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Delivery Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
            <tr>
                <th scope="row">
                    Pick Activity
                </th>
                <td>
                    <input type="checkbox" checked />
                </td>
                <td>
                    <input type="checkbox" checked />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

The "Event" cell belongs to the second column which is the column of "Delivery Orders". That's why it hides when you clicked to hide the "Delivery Orders" column. You may add HTML classes to help jQuery identify what it needs to hide or display.