Populating Select with another Select value in Modal

Question

Good.

I am in a part of my project where I created a form with 4 select options with Mysql Database values. being that they are populated with value of the previous select, working in the first modal, it works perfect, but when opening the second modal, the function is not executed by Javascript. I have the following code in the form

<form method="post" action="#" id="<?php echo $clies['idpdv'];?>">
<div id="n_valo" class="col-md-12">             
    <div class="row">
        <div class="col-md-2">
            <label>Fabricante: </label>
            <select name="id_fabr_ver" class="form-control" id="id_fabr_ver" required>
                <option value="">Escolha o Fabricante</option>
                <?php
                    $result_cat_post = "SELECT * FROM cf_fabric ORDER BY nome_fabric";
                    $resultado_cat_post = mysqli_query($conn, $result_cat_post);

                    while($row_cat_post = mysqli_fetch_assoc($resultado_cat_post) ) {
                        echo '<option value="'.$row_cat_post['nome_fabric'].'">'.$row_cat_post['nome_fabric'].'</option>';
                    }
                ?>
            </select>
        </div>
        <div class="col-md-2">
            <label>Equipamento:</label>
            <span class="carregando">Aguarde, carregando...</span>
            <select name="id_equip_ver" class="form-control" id="id_equip_ver" required>
                <option value="">Selecione</option>
            </select>
        </div>
        <div class="col-md-3">
            <label>Modelo:</label>
            <span class="carregando">Aguarde, carregando...</span>
            <select name="id_modelo_ver" class="form-control" id="id_modelo_ver" required >
                <option value="">Selecione Modelo</option>
            </select>
        </div>
        <div class="col-md-3">
            <label>Versão: </label>
            <span class="carregando">Aguarde, carregando...</span>
            <select name="id_versao_sat" class="form-control" id="id_versao_sat" required >
                <option value="">Selecione Versao</option>
            </select>
        </div>  
    </div>
</div>                                      
<div class="row">
    <div class="col-md-12 text-right">
        <button type="submit" class="btn  btn-outline-success btn-sm" name="salva_equip_cli"  id="btn-salvar" >Salvar </button>
        <button class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Fechar</button>
    </div>
</div>

The Script function works like this.

    <script type="text/javascript"> 

$(function (){

    $('#id_fabr_ver').change(function(){
        if ($(this).val()) {                
            $('#id_equip_ver').hide();
            $('.carregandover').show();
            $('#id_modelo_ver').hide();
            $('.carregandover').show();
            $('#id_versao_sat').hide();
            $('.carregandover').show();
            $('#id_layout_sat').hide();
            $('.carregandover').show();
            $.getJSON('busca_ver.php?search=',{id_fabr_ver: $(this).val(), ajax: 'true'}, function(j){

                var options = '<option value="">Selecione Equipamento </option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].nome_fabrica + '" >' + j[i].descricao + '</option>';
                }   
                $('#id_equip_ver').html(options).show();
                $('.carregandover').hide();
                $('#id_modelo_ver').html(options).show();
                $('.carregandover').hide();
                $('#id_versao_sat').html(options).show();
                $('.carregandover').hide();
                $('#id_layout_sat').html(options).show();
                $('.carregandover').hide();
            });
            } else {
            $('#id_equip_ver').html('<option value="">– Escolha Fabricante –</option>');
            $('#id_modelo_ver').html('<option value="">– Escolha Equipamento –</option>');
            $('#id_versao_sat').html('<option value="">– Escolha Modelo –</option>');
            $('#id_layout_sat').html('<option value="">– Layout  –</option>');
        }
    });
});

In this model when accessing the first modal, where the ID is inside a Table. the number of lines varies with each *client.

I call the modal as follows

<i class="fa fa-edit" data-placement="top" title="Editar SAT"  data-toggle='modal' data-target=".alt_sat<?php echo $clies["id"]; ?>">BOTAO PARA CHAMAR MODAL</i>

Body of modal

<div class="modal fade alt_sat<?php echo $clies["id"];?>"  tabindex="-1" role="dialog" aria-labelledby="alt_sat<?php echo $clies["id"];?>" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered ">---CONTEUDO DA MODAL-----</div></div>

Any hint how do I open the second modal that id comes from the variable, and get popular select them?

Answer 1

Community, After a few days, I managed to solve the following.

I switched to

<select class="form-control" id="id_modelo_sat<?php echo $cxes['idv'];?>" required >

Select Model

also add the variable in Javascript

<script type="text/javascript">
$(function (){ // funcao para buscar as versoes do modelo selecionado anteriormente
    $('#id_modelo_sat<?php echo $cxes['idv'];?>').change(function(){
        if( $(this).val()) {...

as was using the script on another page was missing in include after the .

Thank you all...