Toggle does not work on while() PHP

Question

Colleagues.

I have a system from which to register the missing student, was done individually, IE, I selected a particular student and used this toggle:

Functional code

    <div class="form-group">
    <label for="NomeEscola">O aluno faltou?</label>
    <div class="input-group">
        <div id="radioBtn" class="btn-group">
            <a class="btn btn-primary btn-sm active" data-toggle="presenca" data-title="N" style="border: 1px solid #000">Não</a>
            <a class="btn btn-danger btn-sm notActive" data-toggle="presenca" data-title="S" style="border: 1px solid #000">Sim</a>
        </div>
        <input type="hidden" name="Faltou" id="presenca">
    </div>
    </div>

<script type="text/javascript">
$('#radioBtn a').on('click', function(){
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#'+tog).prop('value', sel);

  $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

Individually it works, but the structure has been changed. The school now selects a class and when listing the students of this class, appears this way:

The problem is that when we list all students within the PHP loop, the toggle stops working. See the code below:

$c = 0;
  while($jmListar = mysqli_fetch_object($sqlListar)){
         $listar .= "<tr>";
         $listar .= "<td>".$jmListar->NomeCompleto."</td>";
         $listar .= "<td>Matemática</td>";
         $listar .= "<td>
         <div id=\"radioBtn\" class=\"btn-group\">
           <a class=\"btn btn-primary btn-sm active\" data-toggle=\"presenca[".$c."]\" data-title=\"N\" style=\"border: 1px solid #000\">Não</a>
           <a class=\"btn btn-danger btn-sm notActive\" data-toggle=\"presenca[".$c."]\" data-title=\"S\" style=\"border: 1px solid #000\">Sim</a>
         </div>
         <input type=\"hidden\" name=\"Faltou\" id=\"presenca\">
         </td>";
         $listar .= "</tr>";
    $c++;
 }

JQUERY

<script type="text/javascript">
$('#radioBtn a').on('click', function(){
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#'+tog).prop('value', sel);

  $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

Answer 1

I managed to solve it. I put Jquery inside the PHP method, but outside the loop. I don’t know if it would be the right mode, but by eqto it is more functional. I’ll put the full code:

CSS

/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}

#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}

PHP/Jquery

public function listarUsuarios(){

$sqlListar = mysqli_query(.....);

    $listar = "<table class='table table-striped'>
                 <thead>
                  <tr>
                   <th>Aluno</th>
                   <th>Matéria</th>
                   <th>Falta</th>
                   </thead>
                   <tbody>";
      $c = 1;
      while($jmListar = mysqli_fetch_object($sqlListar)){
             $listar .= "<tr>";
             $listar .= "<td><i class=\"fa fa-caret-right\" aria-hidden=\"true\"></i> ".$jmListar->NomeCompleto."</td>";
             $listar .= "<td>".$jmListar->Materia."</td>";
             $listar .= "<td>
             <div id=\"radioBtn\" class=\"btn-group\">
               <a class=\"btn btn-primary btn-sm active\" data-toggle=\"presenca$c\" data-title=\"N\" style=\"border: 1px solid #000\">Não</a>
               <a class=\"btn btn-danger btn-sm notActive\" data-toggle=\"presenca$c\" data-title=\"S\" style=\"border: 1px solid #000\">Sim</a>
             </div>
             <input type=\"hidden\" name=\"Faltou\" id=\"presenca$c\">
             </td>";
             $listar .= "</tr>";
        $c++;
      }
      $listar .= "<script type=\"text/javascript\">
                    $('#radioBtn a').on('click', function(){
                      var sel = $(this).data('title');
                      var tog = $(this).data('toggle');
                      $('#'+tog).prop('value', sel);

                      $('a[data-toggle=\"'+tog+'\"]').not('[data-title=\"'+sel+'\"]').removeClass('active').addClass('notActive');
                      $('a[data-toggle=\"'+tog+'\"][data-title=\"'+sel+'\"]').removeClass('notActive').addClass('active');
                    })
                    </script>";
      return $listar;
}