How to create one checkbox in html to hide/show more than one column in a table using jQuery

I'm very new to programming with html and Java, but I'm trying anyway to get something done. I want to create a Table where the columns will be showed/hidden in relations to a checkbox. Now, that's was already solved here, but I need something a bit further: I need that through ONE checkbox I can show/hide two, three or more columns of the table. Here is the code-example, which I actually took from another post, but I'm using the same structure, therefore I will just do the Copy and Paste here.

 $(function () {
    var $chk = $("#grpChkBox input:checkbox"); 
    var $tbl = $("#someTable");
    var $tblhead = $("#someTable th");
    
    $chk.prop('checked', true); 
    
    $chk.click(function () {
    var colToHide = $tblhead.filter("." + $(this).attr("name"));
    var index = $(colToHide).index();
    $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Show and Hide Columns in a Table</h2>
    <p>Click on each Checkbox to hide corresponding Column&lt;</p>
    <div id="grpChkBox">
    <p><input type="checkbox" name="empid"> Employee ID</p>
    <p><input type="checkbox" name="fname"> First Name</p>
    <p><input type="checkbox" name="lname"> Last Name</p>
    <p><input type="checkbox" name="email"> Email</p>
    <p><input type="checkbox" name="phone"> Phone</p>
    </div>
        
    <table id="someTable">
    <thead>
    <tr>
    <th class="empid" style="display: table-cell;">EmpId</th>
    <th class="fname" style="display: table-cell;">FirstName</th>
    <th class="lname">Last Name</th>
    <th class="email">Email</th>
    <th class="phone">Phone</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td style="display: table-cell;">E342</td>
    <td style="display: table-cell;">Bill</td>
    <td>Evans</td>
    <td>Bill@devcurry.com</td>
    <td>234-2345-2345</td>
    </tr>
    <tr>
    <td style="display: table-cell;">E343</td>
    <td style="display: table-cell;">Laura</td>
    <td>Matt</td>
    <td>laura@devcurry.com</td>
    <td>123-1234-5678</td>
    </tr>
    <tr>
    <td style="display: table-cell;">E344</td>
    <td style="display: table-cell;">Ram</td>
    <td>Kumar</td>
    <td>ram@devcurry.com</td>
    <td>345-3456-7890</td>
    </tr>
    </tbody>
    </table>

How can I make that, through the selection of one Checkbox will the visibility of more then one column controlled? In the example, I would like to delete the checkbox "First Name" and "Last Name" and have just one checkbox, for example "Name" to control the two columns First Name and Last Name.

Here is the example: https://jsfiddle.net/marcoud/4t8aukzz/4/