Ошибка динамического отображения входных данных в порядке возрастания и убывания в зависимости от значения раскрывающегося списка.

Question

Я работаю над формой, в которой когда пользователь выбирает значение из выпадающего поля, входные данные отображаются правильно.Когда значение изменяется в порядке возрастания (например, 1,2,3), входные данные отображаются хорошо.

Я хочу создать функциональность, посредством которой, когда значение уменьшается в порядке убывания (3,2,1),входы должны быть скрыты от DOM (измените отображение на none).Пожалуйста, помогите?

Раскрывающийся список с отображением входов

 <div class="check-now" style="width: 100%;">
      <h1 class="cover-travel">Child(ren) travelling with</h1>
          <select name="child" id="child" onchange="checkChild(this.value)">
            <option value="0">None</option>
            <option value="1">1</option>
            <option value="2"> 2</option>
            <option value="3"> 3 </option>
         </select> 
    </div>

Входы отображаются динамически в зависимости от значения раскрывающегося списка

<!--Child 1-->
    <div class="childDetail1" id="childDetail1" style="display:none;">
    <div class="form-line registar2 {{ $errors->has('childname') ? ' has-error' : '' }}">
      <input type="text-area" placeholder="1st Child Name" class="form-input" name="childDetail1Name" id="childDetail1Name" value="{{ old('childname') }}">
      <div class="check-label"></div>
       @if ($errors->has('childname'))
            <span class="help-block">
            <strong>{{ $errors->first('childname') }}</strong>
            </span>
      @endif
    </div>
    </div>
    <!--END-->

     <!--Child 2-->
    <div class="childDetail2" id="childDetail2" style="display:none;">
    <div class="form-line registar2 {{ $errors->has('childname') ? ' has-error' : '' }}">
      <input type="text-area" placeholder="2nd Child Name" class="form-input" name="childDetail2Name" id="childDetail2Name" value="{{ old('childname') }}">
      <div class="check-label"></div>
       @if ($errors->has('childname'))
            <span class="help-block">
            <strong>{{ $errors->first('childname') }}</strong>
            </span>
      @endif
    </div>
    </div>
    <!--END-->

     <!--Child 3-->
    <div class="childDetail3" id="childDetail3" style="display:none;">
    <div class="form-line registar2 {{ $errors->has('childname') ? ' has-error' : '' }}">
      <input type="text-area" placeholder="3rd Child Name" class="form-input" name="childDetail3Name" id="childDetail3Name" value="{{ old('childname') }}">
      <div class="check-label"></div>
       @if ($errors->has('childname'))
            <span class="help-block">
            <strong>{{ $errors->first('childname') }}</strong>
            </span>
      @endif
    </div>
    </div>
    <!--END-->

логика JavaScript

function checkChild(val) {
      //alert(val);
      //Child One
      if (val == 1){
        document.getElementById("childDetail1").style.display = 'block';
      }
      //Child Two
      else if (val == 2){
        document.getElementById("childDetail1").style.display = 'block';
        document.getElementById("childDetail2").style.display = 'block';
        document.getElementById('top').setAttribute("style","height:860px");
      }
      //Child Three
      else if(val == 3){
        document.getElementById("childDetail1").style.display = 'block';
        document.getElementById("childDetail2").style.display = 'block';
        document.getElementById("childDetail3").style.display = 'block';
        document.getElementById('top').setAttribute("style","height:990px");
      }
      else{
        document.getElementById("childDetail1").style.display = 'none';
        document.getElementById("childDetail2").style.display = 'none';
        document.getElementById("childDetail3").style.display = 'none';
        //Reduce div height
        document.getElementById('top').setAttribute("style","height:860px");
      }
    }