Quando vem do Ajax não funciona o select

[Wagner Martins Bodyboard 0]

Quando o  **#sectionChooser** vem do Ajax o <div class="panel" id="1" style="display: block;"> não funciona o select **#bairros** para colocar a #rua, onde estaria o problema?

 

Html   

<div class="col-sm-6">
                            <label for="Planos">Planos</label>
    
              <select name="Planos" id="sectionChooser" class="form-control valid" aria-invalid="false">              
    
              <option value="">Selecione</option>                   
    <option value="1">Diamante</option><option value="2">Ouro</option><option value="3">Prata</option><option value="4">Light</option><option value="5">Free</option><option value="19">Link</option>                   
              </select>         
    
    <div class="panel" id="1" style="display: block;">    
    
    <div class="col-sm-12">
                                    <label><b>Diamante</b></label>
                                    </div>
                                    </div>
<div class="col-sm-6">
                        <label for="Bairro">Bairro</label>
                        <select class="form-control valid" name="bairro" id="bairro3" required="" aria-invalid="false">
    <option value="">Selecione</option>                    
<option value="1">teste bairro</option><option value="2">teste bairro 2 3</option><option value="3">ação bairros</option><option value="4">Centro</option>

      
    </select> 
                    </div>

<div class="col-sm-6">
                        <label for="Rua">Rua</label>
                        
                        
                        
<select class="form-control" name="rua" id="rua" required="">
                    

      
    </select> 
                        
                        
                        
                        
                    </div>

estou tentando assim, mais ainda não deu

$(document).ready(function(){

    $(document).on('change', '#sectionChooser', function(){
        var myID = $(this).val();
        $('.panel').each(function(){
            myID === $(this).attr('id') ? $(this).show() : $(this).hide();
            console.log("ok");
        });
    })


    $(document).on('change', '#bairro', function(){
        var bairroID = $(this).val();

        if(bairroID){
            $.ajax({
                type:'POST',
                url:'ajax_data2.php',
                data:'bairro_id='+bairroID,
                success:function(html){
                    $('#rua').html(html);
                    console.log("ok");
                }
            }); 
        }else{
            $('#rua').html('<option value="">Select categoria first</option>');

        }
    });

});

 

[Wagner Martins Bodyboard 0]

Mas ele deveria pegar o id Bairro3 aqui

 

$(document).on('change', '#bairro', function(){
        var bairroID = $(this).val(); 

 

mas mesmo assim nao funciona.

Tem que acrescentar uma variavel no #bairro, para cada formulario que abrir tenha um id diferente #bairro1 #bairro2 #bairro3..., como posso fazer isso, imagino que teria que fazer isso para o id #rua também #rua1 #rua2 #rua3...