JS - Why does the modal window not work?

Question

I have a modal that I took in Bootstrap, and I made a list of orders with my database, I made a code so that when opening the modal the person first choose an action and through the JS make appear or hide a div. But it’s only working on the first Modal of the List in the rest nothing happens, why?

JS Code

$("#id_tipo_cotacoes").on('change', function(){
$('.formulario').hide();
$('#' + this.value).show();
});

HTML code

$("#id_tipo_cotacoes").on('change', function(){
$('.formulario').hide();
$('#' + this.value).show();
});

<select name="id_tipo_cotacoes" id="id_tipo_cotacoes">
<option value="1" selected>Aguardando</option>
<option value="16">Enviado</option>
<option value="17">Stand By</option>
<option value="13">Aprovado</option>
<option value="14">Cancelado</option>
</select>
<div id="0" class="formulario">Nenhuma opção foi selecionada!</div>
<div id="1" class="formulario" style="display:none;">Aguardando uma ação do usuário</div>
<div id="16" class="formulario" style="display:none;">
<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="fa fa-envelope-o" aria-hidden="true"></i> Enviado</h4> Cotação enviado para o Cliente.
</div>
</div>
<div id="17" class="formulario" style="display:none;">
<div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-warning"></i> Stand By</h4> Cotação colocada em Stand By.
    <br>
    <div class="form-group">
        <label>Qual Motivo?</label>
        <textarea class="form-control" rows="3" placeholder="..." name="motivo_stand"></textarea>
    </div>
    <div class="form-group">
        <label>Aguardar até</label>
        <div class="input-group date">
            <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </div>
            <input type="text" class="form-control pull-right" id="datepicker3" name="data_aguardar">
        </div>
    </div>
</div>
</div>
<div id="13" class="formulario" style="display:none;">
<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-check"></i> Aprovado</h4> Cotação Aprovada, Gerar Pedido.
</div>
</div>
<div id="14" class="formulario" style="display:none;">
<div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-ban"></i> Cancelado</h4>
    <p>Cotação Cancelada</p>
    <div class="form-group">
        <label>Qual Motivo?</label>
        <textarea class="form-control" rows="3" placeholder="..." name="motivo_cancelado"></textarea>
    </div>
</div>
</div>

Answer 1

The correct JS is as below!

    $(function() {
        $("#id_tipo_cotacoes").on('change', function(){
            $('.formulario').hide();
            $('#' + $(this).val()).show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
  
  
<select name="id_tipo_cotacoes" id="id_tipo_cotacoes">
<option value="1" selected>Aguardando</option>
<option value="16">Enviado</option>
<option value="17">Stand By</option>
<option value="13">Aprovado</option>
<option value="14">Cancelado</option>
</select>
<div id="0" class="formulario">Nenhuma opção foi selecionada!</div>
<div id="1" class="formulario" style="display:none;">Aguardando uma ação do usuário</div>
<div id="16" class="formulario" style="display:none;">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="fa fa-envelope-o" aria-hidden="true"></i> Enviado</h4>
Cotação enviado para o Cliente.
</div>
</div>
<div id="17" class="formulario" style="display:none;">
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> Stand By</h4>
Cotação colocada em Stand By.<br>
<div class="form-group">
<label>Qual Motivo?</label>
<textarea class="form-control" rows="3" placeholder="..." name="motivo_stand"></textarea>
</div>
<div class="form-group">
<label>Aguardar até</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker3" name="data_aguardar">
</div>
</div> 
</div>
</div>
<div id="13" class="formulario" style="display:none;">
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Aprovado</h4>
Cotação Aprovada, Gerar Pedido.
</div>
</div>
<div id="14" class="formulario" style="display:none;">
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Cancelado</h4>
<p>Cotação Cancelada</p>
<div class="form-group">
<label>Qual Motivo?</label>
<textarea class="form-control" rows="3" placeholder="..." name="motivo_cancelado"></textarea>
</div>
</div>
</div>