Checkbox not being rendered with correct gentelella css when added via javascript

Question

I'm trying to add some rows data in a datatable, first via Pug and then later on via javascript.

I add the first rows getting data via controller call, and then adding it via pug parse:

<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
  <thead>
    <tr>
      <th>
        <th>Aprovado</th>
      </th>
      <th>Nome</th>
      <th>Email</th>
      <th>Data de nascimento</th>
      <th>Cidade</th>
      <th>Gênero</th>
      <th>Escolaridade</th>
      <th>Instituição de ensino</th>
      <th>Semestre</th>
      <th>Token</th>
      <th>Selection Status</th>
    </tr>
  </thead>

  <tbody>
    for candidate in candidates
      - var formatedCandidate = candidateService.formatCandidateForDataTable(candidate, newTrueCheckbox, newFalseCheckbox);
      <tr>
        <td>
          <th>
            if formatedCandidate.isCandidateApproved
              <input type="checkbox" id="check-all" class="flat" checked>
            else
              <input type="checkbox" id="check-all" class="flat">
          </th>
        </td>
        <td>
          = formatedCandidate.name
        </td>
        <td>
          = formatedCandidate.email
        </td>
        <td>
          = formatedCandidate.bornDate
        </td>
        <td>
          = formatedCandidate.city
        </td>
        <td>
          = formatedCandidate.gender
        </td>
        <td>
          = formatedCandidate.educationLevel
        </td>
        <td>
          = formatedCandidate.educationInstitution
        </td>
        <td>
          = formatedCandidate.educationSemester
        </td>
        <td>
          = formatedCandidate.token
        </td>
        <td>
          = formatedCandidate.selectionStatus
        </td>
      </tr>
  </tbody>
</table>

This way, it manages to render the checkbox with the right style:

Later on, I try to update the rows via a "reload" button, getting data via a get request and then adding rows via javascript:

$.get("candidates/getCandidatesForTable", function(candidatesArray){
    candidateTable.clear().draw();
    candidatesArray.forEach((candidate, index) => {
        debugger;
            if (candidate[1]) {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat" checked/>
                                </th>`;
            } else {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat"/>
                                </th>`;
            }
        candidateTable.row.add(candidate).draw();
    });
});

Although I inserted the HTML code via javascript using the same properties as it was added via pug, the checkbox was rendered different: it is rendered, but the css style is now gone:

How should I add the a checkbox via javascript and still get the correct css styling?