how to add only one column and `thead` in the last row with a checkbox

guy's i need your help. i have a table that contain a checkboxthat i have create with a data array from csv file. the table look like this picture

the id's of the checkbox is

1. the number 1 checkbox has id's mycheckbox1
2. the number 2 checkbox has id's mycheckbox

the condition when the column and header created is like this. when i click the mycheckbox1 it will created one header and create a column for each data. and then when i click mycheckbox it just create a column (in a row of the mycheckbox place) and the header (in the 1st row) .

the data i want to pass into the column is Tilting when checked and when it was unchecked the data is Borongan. and i want to create the header and the column just one time only.

i have try make a code but it wont work T_T someone please help me

$('#mycheckbox1').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':mycheckbox').each(function() {
          this.checked = true;
        var myTableArray = [];
        $(".table-bordered tr").each(function() {
          var tdValue = ($(this).find("td:eq(7)").text());
        $(this).find('thead').eq(8).after('<th>' + "Payroll" + '</th>');
        $(this).find('td').eq(8).after('<td>' + "Tilting" + '</td>');
      });
  }
  else {
    $(':mycheckbox').each(function() {
        this.checked = false;
        var myTableArray = [];
        $(".table-bordered tr").each(function() {
          var tdValue = ($(this).find("td:eq(7)").text());
        $(this).find('thead').eq(8).after('<th>' + "Payroll" + '</th>');
        $(this).find('td').eq(8).after('<td>' + "Borongan" + '</td>');
      });
  }
})