Как решить Не могу прочитать свойство 'флажок' из неопределенного для флажка

Question

var html = ''
var allseat = []
let allS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33]
var emp = db.collection('BookedTicketData').get().then((snapshot) => {
  snapshot.docs.forEach((doc) => {
    data = doc.data();
    bseat = data.AllSeat
    // console.log(bseat)  //(2) [33, 34]
    allseat = allseat.concat(bseat)
  })

  console.log(allseat)
  return allseat;
}).then((s) => {
  allS.filter(n => {
    if (n !== 33) {
      if (n % 2 != 0 && n != 1) {
        html += `         `
      }
      if (s.includes(n)) {
        console.log("n -> " + n)
        console.log("s -> " + s) // s -> 33,34
        html += `<input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}" disabled/>
                     <label for="${n}" class="col-2 br-pill f7 m-1 btn text-white bg-danger border-danger grow" data-toggle="tooltip" title="Seat Already Booked" disabled>${n}</label>

                     `
      } else {
        html += ` <input type="checkbox" class="dn checkme" name="s-size" id="${n}"  value="${n}"/>
                     <label for="${n}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark           grow">${n}</label>

                   `
      }
    }
  });

  document.getElementById('loader').innerHTML = html;

  //Note: Add change events after setting the html into the DOM.

  $('input[type=checkbox]').on('change', function() {
    console.log($(this).attr("id"));
    let id = $(this).attr("id");
    let checkbox = document.getElementById(id);
    // console.log("C->" + id)
    let checkbox_label = $(`[for=${id}]`);
    // console.log("CL->" + checkbox_label)

    if (checkbox_label.hasClass('bg-dark')) {
      // console.log('Hii')
      checkbox_label.removeClass('text-white')
      checkbox_label.addClass('text-dark')
      checkbox_label.removeClass('bg-dark')
      checkbox_label.addClass('bg-white')
    } else {
      // console.log('Bye')
      checkbox_label.removeClass('text-dark')


      checkbox_label.addClass('text-white')
      checkbox_label.removeClass('bg-white')
      checkbox_label.addClass('bg-dark')
    }
  });

})

<div class="row flex flex-row justify-center items-center">
  <div class="col-11">
    <form id="form1" method="post"></form>
    <div id="loader" class="row flex-row flex justify-center mt3 mb4 py-2 f7 items-center vh-auto overflow-auto border-dark ba b--washed-green">
    </div>
    <div class="form-group">
      <button aria-expanded="false" data-toggle="collapse" data-target="#demo" style="background-color: teal; color: white;" onclick="validate(33)" class="btn roberto-btn w-100">Enter Traveller Details</button>
      <div id="demo" class="collapse">
        <div id="displayer" class="row flex-row flex justify-center mt3 mb4 py-2 f7 items-center vh-50 overflow-auto border-dark ba b--red">
          <div class="card card-body " id="cust-data">
            <!-- Customer Data -->
          </div>
        </div>
      </div>
    </div>
    </form>
  </div>
</div>

Я взял значение из firebase и показал флажок в соответствии с ними, и после этого я сделал кнопку с именем «Enter Traveler Details», которая выполняет задачу подсчета флажков, флажок которых отмечен или нет и в соответствии с тем, отображая форму, сколько флажков выбрано. Но у меня возникает проблема с тем, что я нажал кнопку «Ввести подробности путешественника», я применил функцию и подтвердил (33)

let validate = (num) => {
let checks = document.getElementsByClassName('checkme');
console.log(checks); 
let html = '';
let count = 0;
for (i = 0; i < num; i++) {
  if (checks[i].checked === true) {
      console.log("Value -> " + checks[i].value)
      count++;
  } else {
      // console.log("Not ->" + i)
  }
}
for (i = 0; i < count; i++) {
  html += `
      <form class="customer-validation">

          <div class="customer-datas">
          <div class="f7 customer-data" >
          <div class="row justify-content-between align-items-end">
  <div class="col-6 col-md-2 col-lg-3">
      <label for="Name">Name</label>
      <input type="text" class="form-control   cust-name"  name="name"
          placeholder="Name" >
  </div>
  <div class="col-6 col-md-2 col-lg-3">
      <label for="Age">Age</label>
      <input type="number" class="form-control  cust-age"  name="age"
          placeholder="Age">

  </div>
  <div class="col-6 col-md-2 col-lg-3">
      <label for="Gender">Gender</label><br>
      <label class="checkbox-inline">
     <input type="checkbox"  class="cust-male" value="Male"> Male
  </label>
      <label class="checkbox-inline">
     <input  class="cust-female" type="checkbox"  value="Female"> Female
  </label>

    </div>
 </div>
 <br>

      </div>
      <hr />
      </div>
      </form>
  `
   }
    html += `
      <button id="payment-button" type="submit" style="background-color: teal; color: white;" 
    onclick="printData()" class="btn roberto-btn w-100">Book your Ticket</button>

   `
    document.getElementById("cust-data").innerHTML = html;
  }

Эта функция выполняется, но выдает ошибку. Невозможно прочитать свойство 'проверено' из неопределенного