title: I am trying to tick all the checkboxes of tbody when checkbox of its thead is checked but its not working
body: <p>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. </p>
  
  <p>Line to be checked - <code>$("#add-table &gt; thead.thead"+z+" &gt; tr &gt; th input[type=checkbox]")</code></p>
  
  <pre><code>            for (var z=0; z&lt;dlength; z++) {
                  var thead = "&lt;thead class='thead"+z+"'&gt;&lt;tr&gt;&lt;th class='center'&gt;&lt;label class='pos-rel'&gt;&lt;input type='checkbox' class='ace'&gt;&lt;span class='lbl'&gt;&lt;/span&gt;&lt;/label&gt;&lt;/th&gt;&lt;th class='center'&gt;"+disarray[z]+"&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;";
                  $('#add-table').append(thead);
                  alldata.forEach(function(e, i){
                      if(alldata[i]['section_name'] == disarray[z]){
                          var tbody = "&lt;tbody class='tbody"+z+"'&gt;&lt;tr&gt;&lt;td class='center'&gt;&lt;label class='pos-rel'&gt;&lt;input type='checkbox' class='ace'&gt;&lt;span class='lbl'&gt;&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;&lt;td&gt;"+alldata[i]['emp_Fullname']+"&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;"
                          $('#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 &gt; thead.thead"+z+" &gt; tr &gt; 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+" &gt; 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);
                  });  
              }
  </code></pre>
  
  <p>When I tried this statically it works: </p>
  
  <pre><code>                for (var z=0; z&lt;dlength; z++) {
                  var thead = "&lt;thead class='thead"+z+"'&gt;&lt;tr&gt;&lt;th class='center'&gt;&lt;label class='pos-rel'&gt;&lt;input type='checkbox' class='ace'&gt;&lt;span class='lbl'&gt;&lt;/span&gt;&lt;/label&gt;&lt;/th&gt;&lt;th class='center'&gt;"+disarray[z]+"&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;";
                  $('#add-table').append(thead);
                  alldata.forEach(function(e, i){
                      if(alldata[i]['section_name'] == disarray[z]){
                          var tbody = "&lt;tbody class='tbody"+z+"'&gt;&lt;tr&gt;&lt;td class='center'&gt;&lt;label class='pos-rel'&gt;&lt;input type='checkbox' class='ace'&gt;&lt;span class='lbl'&gt;&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;&lt;td&gt;"+alldata[i]['emp_Fullname']+"&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;"
                          $('#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 &gt; thead.thead0 &gt; tr &gt; 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 &gt; 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 &gt; thead.thead1 &gt; tr &gt; 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 &gt; 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 &gt; thead.thead2 &gt; tr &gt; 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 &gt; 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 &gt; thead.thead3 &gt; tr &gt; 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 &gt; 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);
                  });  
              }
  </code></pre>