Boa noite pessoal!
Tenho uma lista de pessoas que retorna de uma consulta usando um WHILE, cada um com seu ID. Passo esse ID para uma janela MODAL (Bootstrap), aonde vou cadastrar as férias. Usou o javascript que ao selecionar no SELECT, mostrar ou não os campos (input). O problema é que só funciona na primeira janela MODAL e ainda, o que faça nas outras reflete na primeira.
JANELA MODAL *************************************
<!-- Inicio Modal CADASTRAR-->
<div class="modal fade" id="myModalcad<?php echo $linhas['id_mil']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center" id="myModalLabel">Cadastrar Férias <?php echo $planoano; ?></h3>
<h3 class="modal-title text-center" id="myModalLabel">
<strong>
<?php echo $posicao['sigla']." ".$qualifica['qualifica']." ".$linhas['nome']; ?>
</strong>
</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" action="processos/proc_cad.php">
<div class="form-group">
<label for="recipient-name" class="control-label">Tipo</label>
<select class="form-control" name="estabila" meta charset="utf-8" onchange="muda(this);" required>
<option>Selecione</option>
<option value="10">10 dias</option>
<option value="15">15 dias</option>
<option value="30">30 dias</option>
</select>
</div>
<div class="form-group" id="divdata_1p" style='display:none'>
<label for="message-text" class="control-label">1º Período</label>
<input type="Date" class="form-control" name="data_1p" id="data_1p" required>
</div>
<div class="form-group" id="divdata_2p" style='display:none'>
<label for="message-text" class="control-label">2º Período</label>
<input type="Date" class="form-control" name="data_2p" id="data_2p">
</div>
<div class="form-group" id="divdata_3p" style='display:none'>
<label for="message-text" class="control-label">3º Período</label>
<input type="Date" class="form-control" name="data_3p" id="data_3p">
</div>
<div class="modal-footer" style='text-align:center'>
<button type="submit" class="btn btn-primary">Cadastrar</button>
<button type="button" class="btn btn-sucess" data-dismiss="modal" id="btncancelar">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fim Modal CADASTRAR-->
JAVASCRIPT ***************************************************
function muda(obj){
var i = obj.selectedIndex;
var j = obj.options[i].value;
if (j=="Selecione") {
document.getElementById('divdata_1p').style.display="none"; //desabilitar
document.getElementById('divdata_2p').style.display="none"; //desabilitar
document.getElementById('divdata_3p').style.display="none"; //desabilitar
document.getElementById('data_1p').value=""; //zera campo
document.getElementById('data_2p').value=""; //zera campo
document.getElementById('data_3p').value=""; //zera campo
} else
if (j=='10') {
document.getElementById('divdata_1p').style.display="block"; //habilitar
document.getElementById('divdata_2p').style.display="block"; //habilitar
document.getElementById('divdata_3p').style.display="block"; //habilitar
} else
if (j=='15') {
document.getElementById('divdata_1p').style.display="block"; //habilitar
document.getElementById('divdata_2p').style.display="block"; //habilitar
document.getElementById('divdata_3p').style.display="none"; //desabilitar
document.getElementById('data_3p').value=""; //zera campo
} else
if (j=='30') {
document.getElementById('divdata_1p').style.display="block"; //habilitar
document.getElementById('divdata_2p').style.display="none"; //desabilitar
document.getElementById('divdata_3p').style.display="none"; //desabilitar
document.getElementById('data_2p').value=""; //zera campo
document.getElementById('data_3p').value=""; //zera campo
}
}