I am trying to tick all the checkboxes of tbody when checkbox of its thead is checked but its not working

Question

I am trying to tick all the checkboxes of tbody when checkbox of its thead is checked but its not working. Static values(thead.thead0) are working but dynamic value (thead.thead"+z+") is not working.

Line to be checked - $("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]")

            for (var z=0; z<dlength; z++) {
                var thead = "<thead class='thead"+z+"'><tr><th class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></th><th class='center'>"+disarray[z]+"</th></tr></thead>";
                $('#add-table').append(thead);
                alldata.forEach(function(e, i){
                    if(alldata[i]['section_name'] == disarray[z]){
                        var tbody = "<tbody class='tbody"+z+"'><tr><td class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></td><td>"+alldata[i]['emp_Fullname']+"</td></tr></tbody>"
                        $('#add-table').append(tbody);
                        console.log(alldata[i]['section_name']);
                    }
                });

                //And for the first simple table, which doesn't have TableTools or dataTables
                //select/deselect all rows according to table header checkbox
                var active_class = 'active';

                //this part is not working thead.thead"+z+".

                $("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody"+z+" > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });

                //select/deselect a row when the checkbox is checked/unchecked
                $('#add-table').on('click', 'td input[type=checkbox]' , function(){
                    var $row = $(this).closest('tr');
                    if(this.checked) $row.addClass(active_class);
                    else $row.removeClass(active_class);
                });  
            }

When I tried this statically it works:

                for (var z=0; z<dlength; z++) {
                var thead = "<thead class='thead"+z+"'><tr><th class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></th><th class='center'>"+disarray[z]+"</th></tr></thead>";
                $('#add-table').append(thead);
                alldata.forEach(function(e, i){
                    if(alldata[i]['section_name'] == disarray[z]){
                        var tbody = "<tbody class='tbody"+z+"'><tr><td class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></td><td>"+alldata[i]['emp_Fullname']+"</td></tr></tbody>"
                        $('#add-table').append(tbody);
                        console.log(alldata[i]['section_name']);
                    }
                });

                //And for the first simple table, which doesn't have TableTools or dataTables
                //select/deselect all rows according to table header checkbox
                var active_class = 'active';

                //Here is the change thead.thead0

                $("#add-table > thead.thead0 > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody0 > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });
                console.log(z);

                //Here is the change thead.thead1

                $("#add-table > thead.thead1 > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody1 > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });

                $("#add-table > thead.thead2 > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody2 > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });

                $("#add-table > thead.thead3 > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody3 > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });

                //select/deselect a row when the checkbox is checked/unchecked
                $('#add-table').on('click', 'td input[type=checkbox]' , function(){
                    var $row = $(this).closest('tr');
                    if(this.checked) $row.addClass(active_class);
                    else $row.removeClass(active_class);
                });  
            }

Answer 1

Well I think it should be table.tbody in here and td , not th .

$("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]")

Should be

$("#add-table > thead.tbody"+z+" > tr > td input[type=checkbox]")