Only the first select works (Popular selects with Parent element php javascript)

Question

I am developing a code to renew student enrollments, on this page the first select the user will select whether the student will go to the next class or will remain in it. I looped in php and is loading all students:

I got popular the selects, however, only works of the first student, the others. I’ve been searching and I believe I should create element Parent and Child in my javascript but I tried everything and could not.

I followed the code of the first select of the image:

<select 
  class="form-control selectboxit" 
  name="promotion_status_<?php echo $row['student_id'];?>" style="width: 40px;" id="select1">
  <option value="vazio">Selecione uma opção</option>
  <option value="<?php echo $class_id_to;?>">
  <?php echo 'Renovar para' ." - ". $this->crud_model->get_class_name($class_id_to); ?>
  </option>
  <option value="<?php echo $class_id_from; ?>" >
  <?php echo 'Permanecer no' ." - ". $this->crud_model->get_class_name($class_id_from); ?>
 </select>

I followed the second select code of the image:

<select id="select2">
 <option value="">selecione</option>
</select>

Javascript code:

$("#select1").change(function() {
    var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
    var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

    var valor = $(this).val();

    if (valor == "vazio") {
        $("#select2").html("");
        {
            $("#select2").append("<option value='test'> Selecione </option>");
        }

    }else if (valor == "<?php echo $class_id_to;?>") {
        $("#select2").html("");

        for(var i = 0; i < proxima_turma.length; ++i) {
            $("#select2").append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
        }


    } else if (valor == "<?php echo $class_id_from; ?>") {

        $("#select2").html("");

        for(var i = 0; i < antiga_turma.length; ++i) {
            $("#select2").append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
        }
    }
});

});

How to define Parent and Child elements?

How is the table with the selects currently:

<tr>
 <td align="left">
    <?php
     if((!is_null($transferidos) && (!is_null($evadidos)))){
      echo $name . ' - ' .'<b></b>Não pertencente a unidade de ensino';
         }elseif((!is_null($transferidos) || (!is_null($evadidos)))){
         echo $name . ' - ' .'<strong>Não pertencente a unidade de 
 ensino</strong>';
  }else{
 echo $name;
 }
 ?>
 </td>
 <td align="center">
 <?php if($row['section_id'] != '' && $row['section_id'] != 0)
 echo $this->db->get_where('section' , array('section_id' => 
 $row['section_id']))->row()->name;
  ?>
 </td>
 <td>
 <?php if($query->num_rows() < 1):?>
  <select class="select1"   name="promotion_status_<?php echo 
  $row['student_id'];?>" >
  <option value="vazio">Selecione uma opção</option>
  <option value="<?php echo $class_id_to;?>">
  <?php echo 'Renovar para' ." - ". $this->crud_model- 
 >get_class_name($class_id_to); ?>
</option>
<option value="<?php echo $class_id_from; ?>" >
<?php echo 'Permanecer no' ." - ". $this->crud_model- 
>get_class_name($class_id_from); ?>
</select>
 <?php endif; ?>
 <?php if($query->num_rows() > 0): ?>
 <button class="btn btn-success">
 <i class="entypo-check"></i> Matricula já foi renovada
 </button>
 <?php endif;?>
 </td>
 <td>
     <?php if($query->num_rows() < 1):?>
     <select class="select2" name="promotion_status2_<?php 
    echo $row['student_id'];?>">
     <option value="">selecione</option>
         </select>
     <?php endif;?>
     <?php if($query->num_rows() > 0):?>
     <button class="btn btn-success">
     <i class="entypo-check"></i> Matricula já foi renovada
     </button>
     <?php endif;?>
     </td>
     </tr>

Answer 1

You cannot repeat id’s on the same page as you will only get the first one you find.

Use class instead of id. Just change id="select1" and id="select2" for class="form-control selectboxit select1" and class="select2" in the selects of the list.

Then you will change the .select2 which is on the same line as .select1 when the change:

$(".select1").change(function() {
    var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
    var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

    var valor = $(this).val();
    var select2 = $(this).closest("tr").find(".select2"); // busca o select2 da mesma linha

    if (valor == "vazio") {
        select2
        .html("")
        .append("<option value='test'> Selecione </option>");

    }else if (valor == "<?php echo $class_id_to;?>") {
        select2.html("");

        for(var i = 0; i < proxima_turma.length; ++i) {
            select2.append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
        }


    } else if (valor == "<?php echo $class_id_from; ?>") {

        select2.html("");

        for(var i = 0; i < antiga_turma.length; ++i) {
            select2.append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
        }
    }
});