почему jquery не работает в соответствии с требованием

Question

function displayingListAdultChild(nameSelect){
      if(nameSelect){
           firstroom 			= document.getElementById("firstroom").value;
           secondroom 			= document.getElementById("secondroom").value;
           thirdroom 			= document.getElementById("thirdroom").value;
           fourthroom 			= document.getElementById("fourthroom").value;
          if(firstroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingThirdAdultChild").style.display = "none";
          	  document.getElementById("displayingSecondAdultChild").style.display = "none";
              document.getElementById("displayingFirstAdultChild").style.display = "block";
          }
          else if(secondroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingThirdAdultChild").style.display = "none";
              document.getElementById("displayingSecondAdultChild").style.display = "block";

          }else if(thirdroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingSecondAdultChild").style.display = "block";
              document.getElementById("displayingThirdAdultChild").style.display = "block";
          }else if(fourthroom == nameSelect.value){
          	  document.getElementById("displayingSecondAdultChild").style.display = "block";
              document.getElementById("displayingThirdAdultChild").style.display = "block";
          	  document.getElementById("displayingFourthAdultChild").style.display = "block";
          }
      }
   }

   /*here selecting child field*/
   function displayingNumberOfChildAge(nameSelect){
   	// body... 
   	if(nameSelect){
   	         first_child_col 			= document.getElementById("first_child_col").value;
             second_child_col 			= document.getElementById("second_child_col").value;
             second_child_col 			= document.getElementById("second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age").style.display = "none";
                document.getElementById("displaying_first_child_age").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
                document.getElementById("displaying_first_child_age").style.display = "block";
                document.getElementById("displaying_second_child_age").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age").style.display = "none";
            	document.getElementById("displaying_second_child_age").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeSecondRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      sec_room_first_child_col 		= document.getElementById("sec_room_first_child_col").value;
          sec_room_second_child_col 	= document.getElementById("sec_room_second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_second_room").style.display = "none";
                document.getElementById("displaying_first_child_age_second_room").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_second_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_second_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_second_room").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeThirdRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      third_room_first_child_col 	= document.getElementById("third_room_first_child_col").value;
          third_room_second_child_col 	= document.getElementById("third_room_second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_third_room").style.display = "none";
                document.getElementById("displaying_first_child_age_third_room").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_third_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_third_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_third_room").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeFourthRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      fourth_room_first_child_col 	= document.getElementById("fourth_room_first_child_col").value;
          fourth_room_second_child_col 	= document.getElementById("fourth_room_second_child_col").value;
            if(fourth_room_first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_fourth_room").style.display = "none";
                document.getElementById("displaying_first_child_age_fourth_room").style.display = "block";
            }
            else if(fourth_room_second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_fourth_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_fourth_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_fourth_room").style.display = "none";
            }
        }
     }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
   <div class="form-group">
      
      
      <div class="col-sm-1">
         <label>Rooms</label>
         <select id="rooms" onchange="displayingListAdultChild(this);" class="form-control">
            <option id="empty">Select</option>
            <option id="firstroom" 	value="1">1</option>
            <option id="secondroom" 	value="2">2</option>
            <option id="thirdroom" 	value="3">3</option>
            <option id="fourthroom" 	value="4">4</option>
            <option id="fifthroom" 	value="5">5</option>
            <option id="sixthroom" 	value="6">6</option>
         </select>
      </div>
      
   </div>
</div>
<div class="row">
   <div id="displayingFirstAdultChild" style="display:none;">
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
               <option>select</option>
               <option id="first_child_col"  value='1'>1</option>
               <option id="second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingSecondAdultChild" style="display:none;">
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeSecondRoom(this);" class="form-control">
               <option>select</option>
               <option id="sec_room_first_child_col"  value='1'>1</option>
               <option id="sec_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_second_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_second_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingThirdAdultChild" style="display:none;">
      <label>Third Room</label>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeThirdRoom(this);" class="form-control">
               <option>select</option>
               <option id="third_room_first_child_col"  value='1'>1</option>
               <option id="third_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_third_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_third_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingFourthAdultChild" style="display:none;">
      <label>Fourth Room</label>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeFourthRoom(this);" class="form-control">
               <option>select</option>
               <option id="fourth_room_first_child_col"  value='1'>1</option>
               <option id="fourth_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_fourth_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_fourth_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
                  <option  value='6'>6</option>
                  <option  value='7'>7</option>
                  <option  value='8'>8</option>
                  <option  value='9'>9</option>
                  <option  value='10'>10</option>
                  <option  value='11'>11</option>
                  <option  value='12'>12</option>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>

это варианты обслуживания номеров. согласно требованию комната будет видна. когда я нажимаю на первую комнату, чтобы успешно получить результат. но при попытке получить всю комнату, выбрав поле селектора, чтобы он не работал должным образом. внутри опции есть опция child, также доступная для выбора child. при попытке мгновенно щелкнуть дочернее поле 2, оно также не появляется в первый раз

Answer 1

Вы упомянули, что вы приняли этот код от кого-то еще. Если вы хотите обновить его до jQuery, вы внесете много изменений. Вам не нужно, если вы не хотите.

Идея функции заключается в том, чтобы делать то, что часто повторяется. Поэтому лучше написать одну функцию, которая может работать с 4 разделами, чем написать уникальную функцию для каждого раздела; разве что каждая функция делает что-то свое.

С некоторыми незначительными изменениями в HTML вы можете лучше использовать атрибуты class и сделать большую часть своего кода намного меньше и проще в использовании.

Вот пример.

function displayingListAdultChild(nameSelect) {
  if (nameSelect) {
    $(".display-selection").hide();
    for (var i = 0; i < nameSelect.value; i++) {
      $(".display-selection").eq(i).show();
    }
  }
}

function displayingNumberOfChildAge(nameSelect) {
  if (nameSelect) {
    if (nameSelect.value == 1) {
      $(nameSelect).closest(".display-selection").find(".child-1").show();
      $(nameSelect).closest(".display-selection").find(".child-2").hide();
    } else if (nameSelect.value == 2) {
      $(nameSelect).closest(".display-selection").find(".child-1").show();
      $(nameSelect).closest(".display-selection").find(".child-2").show();
    } else {
      $(nameSelect).closest(".display-selection").find(".child-1").hide();
      $(nameSelect).closest(".display-selection").find(".child-2").hide();
    }
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <div class="form-group">
    <div class="col-sm-1">
      <label>Rooms</label>
      <select id="rooms" onchange="displayingListAdultChild(this);" class="form-control">
        <option id="empty">Select</option>
        <option id="firstroom" value="1">1</option>
        <option id="secondroom" value="2">2</option>
        <option id="thirdroom" value="3">3</option>
        <option id="fourthroom" value="4">4</option>
        <option id="fifthroom" value="5">5</option>
        <option id="sixthroom" value="6">6</option>
      </select>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingFirstAdultChild" style="display:none;" class="display-selection">
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="first_child_col" value='1'>1</option>
          <option id="second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
    </div>
    <div class="# child-2" id="displaying_second_child_age" style="display: none;">
      <div class="form-group col-xs-1">
        <h6 class="m_label">Child(2)Age</h6>
        <select class="form-control" id="second_child_age" name="second_child_age">
          <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>
          <option value='6'>6</option>
          <option value='7'>7</option>
          <option value='8'>8</option>
          <option value='9'>9</option>
          <option value='10'>10</option>
          <option value='11'>11</option>
          <option value='12'>12</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingSecondAdultChild" style="display:none;" class="display-selection">
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="sec_room_first_child_col" value='1'>1</option>
          <option id="sec_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_second_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_second_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingThirdAdultChild" style="display:none;" class="display-selection">
    <label>Third Room</label>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="third_room_first_child_col" value='1'>1</option>
          <option id="third_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_third_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_third_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingFourthAdultChild" style="display:none;" class="display-selection">
    <label>Fourth Room</label>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="fourth_room_first_child_col" value='1'>1</option>
          <option id="fourth_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_fourth_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_fourth_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

Вместо того, чтобы вызывать каждый элемент по его идентификатору, можно использовать выбор классов и, таким образом, вызывать вещи в группах или в более общем смысле. Это позволяет использовать 1 функцию из многих секций (или комнат).

Если это не имеет никакого смысла, я бы вернулся и прочитал или пробежал некоторые базовые учебники по jQuery. Использование фреймворка jQuery может вам очень помочь.