how to create a table header with a label and checkbox using JQuery dynamically

I have a situation where I need to add a new column in the table and in the header of the new column should have a checkbox.

so I am creating a <th> dynamically and trying to append a <input> element (checkbox) in that <th> then appending that <th> to the first row of the table.

but in output, I can see the table with an added column header without a checkbox.

my code looks like

 var $th = '<th class="width-110">' + devCentre + '</th>';
 var $cbkSelectAll = $('<input />', { type: 'checkbox' });
 $cbkSelectAll.appendTo($th);
 $('#tblTable1 thead tr:first-child').append($th);

let me know where I am going wrong and give me some suggestions so I can add a checkbox inside the table header.