Как динамически добавлять флажки в таблицу в javascript

У меня проблема с динамическим добавлением флажков в код javascript. У меня другой сценарий. Я получаю данные через ajax, поэтому мне нужно добавить таблицу в javascript, а не в html. Но теперь я хочу добавить флажки в свою рекламу. Действительно, я добавил их, но я не знаю, как проверить их все одним флажком. Я также пишу код для выбора всего, но это работает только тогда, когда мой текст находится в html. Ниже приведен мой код, и он даст вам четкое представление. Попробуйте прочитать его в редакторе, потому что он более сложный :)

//Джаваскрипт

$(document).ready(function() {

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
      }
    });
  });

  $('select[name = "class_id"]').on('change', function() {
    var classID = $(this).val();
    if (classID) {

      $.ajax({

        url: '/attendance/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {

          var markup = '';
          markup += '<tr><th style = "width: 2%" class = "align-middle text-center"><input type = "checkbox" id = "options"></th><th style = "width: 2%" class = "align-middle text-center">#</th> <th style = "width: 15%" class = "text-center">Student ID<input type = "text" class = "form-control" disabled></th> <th style = "width: 15%" class = "text-center">Student Name<input type = "text" class = "form-control" disabled></th> <th style = "width: 15%" class = "text-center">Attendance<input type = "text" class = "form-control" disabled></th> <th style = "width: 15%" class = "text-center">Date<input type = "text" class = "form-control" disabled></th> <th style = "width: 15%;" class = "align-middle text-center">Actions</th> <tr>';

          $.each(data, function(key, value) {

            markup += '<tr> <td><input class = "checkBoxes" type = "checkbox" name = "checkBoxArray[]"></td> <td><input type = "hidden" value = "' + value.id + '" name = "id[]">' + value.id + '</td> <td><input type = "hidden" value = "' + value.student_id + '" name = "student_id[]">' + value.student_id + '</td> <td><input type = "hidden" value = "' + value.first_name + '" name = "first_name[]"><input type = "hidden" value = "' + value.last_name + '" name = "last_name[]">' + value.first_name + ' ' + value.last_name + '<td><input type = "hidden" value = "' + value.attendance + '" name = "attendance[]">' + value.attendance + '</td>' + '<td><input type = "hidden" value = "' + value.created_at + '" name = "created_at[]">' + value.created_at + '</td>' + '<td style = " width=12%" class = "text-center"> <a><button title = "Edit" class = "btn btn-outline-primary"><span class = "fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';

          });
          $('table[id = "studentsData"]').html(markup);
        }
      });
    }
  });
});

//Для установки всех флажков

$(document).ready(function() {

  $('#options').click(function() {

    if (this.checked) {
      $('.checkBoxes').each(function() {
        this.checked = true;
      });
    } else {
      $('.checkBoxes').each(function() {
        this.checked = false;
      });
    }

  });

});