I have a modal that I took in Bootstrap, and I made a list of requests with my database, I made a code so that, when opening the modal the person first choose an action and through JS make appear or hide a div
. But it is only working on the first Modal of the List in the remaining 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>