hide show multiple divs based on select with jquery - php

Question

I have to write a simple script for a reservations form.
The idea is to show Number of Adults and Children inputs for each room selected.
But if number of Children is entered, I need to show Age Field, for each Children.
Like this :
Number of Rooms - 2
Room-1
Adults: 2 Children: 2
Children Age[1] : 10 Children Age[2] : 15
--------------------------------------
Room-2
Adults: 2 Children: 1
Children Age[1] : 6
--------------------------------------
That's the idea (like Expedia Seach Box).
Here is my code, is almost working. Bue whe I select Children Ages, the With Adult and Children input disappears.
Here in my code:
enter code here
<lablel>ROOMS</lablel>
<select id="rooms" name="rooms" size="1"/>
<option val="">-?-</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
<div id="showRoom1" style="display:<?php echo $selhab1 ;?>">Room [1]
<label>ADULTS</lablel><lablel>CHILDREN</lablel>
<select required id="seldos" name="adlr1" size="1">
<option value="">--?--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="child" name="chl" size="1" />
<option val="0">--</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
<div id="show1" style="display:<?php echo $seled1 ;?>">Age Child [1]
<?php
echo'<select class="seldos" id=select name="age1" id="age1" >';
if($age1 == ''){
echo'<option value="--">-?-</option>';
}else{
print "<option value='$age1'>$edad1</option>";
}
for ($i = 1; $i <= $maxage; $i++) {
echo "<option value=$i>";
echo "$i</option>";
}
print"</select></div>";
?>
<div id="show2" style="display:<?php echo $seled2 ;?>">Age Child [2]
<?php
echo'<select class="seldos" name="edad2" id="age2">';
if($age2 == ''){
echo'<option value="--">-?-</option>';
}else{
print "<option value='$age2'>$age2 </option>";
}
for ($i = 1; $i <= $maxage; $i++) {
echo "<option value=$i>";
echo "$i</option>";
}
print"</select></div>";
?>
.
.
.
**** UNTIL CHILD AGE 5
</div>
<script>
$("#rooms").bind("change", function () {
var value = parseInt(this.value, 10);
$("div[id^='showRoom']").hide();
for(var i = 1; i <= value; i++) {
$("#showRoom" + i).fadeIn(300);
}
});
$("#child").bind("change", function () {
var value = parseInt(this.value, 10);
$("div[id^='show']").hide();
for(var i = 1; i <= value; i++) {
$("#show" + i).fadeIn(300);
}
});
</script>

Answer 1

I believe your issue is this line:
$("div[id^='show']").hide();
This is hiding the showRoom1 DIV which contains the adult and children inputs.