Jquery append div depend on select dropdown

Question

I am trying to create this option here.. The user can choose how many rooms he wants.

When he selects I am appending with JQuery the number of rooms he choosed.

Then he can choose how many adults and children there will be in each room. But when he choose for children I want to append another choice (age of children) depend on how many children.

As you can see I can add the rooms but on children I get all the problems.

1.)When I am adding the number of children i can not make it append only on specific div. And children option is working only for the first one.

2.)I tried to hide children age boxes like the rooms but I can not make it work.

Any feedback on what am i doing wrong would be helpful.

Thanks

So this is my code

$(document).ready(function() {
  //onchange of rooms-count
  $('#search_rooms_select').change(function() {
    var roomsSelected = $('#search_rooms_select option:selected').val();
    var roomsDisplayed = $('[id^="room-"]:visible').length;
    var roomsRendered = $('[id^="room-"]').length;

    //if room count is greater than number displayed - add or show accordingly
    if (roomsSelected > roomsDisplayed) {
      for (var i = 1; i <= roomsSelected; i++) {
        var r = $('#room-' + i);
        if (r.length == 0) {
          var clone = $('#room-1').clone(); //clone
          clone.children(':first').text("Room: ");
          //change ids appropriately
          setNewID(clone, i);
          clone.children('div').children('select').each(function() {
            setNewID($(this), i);
          });
          $(clone).insertAfter($('#room-' + roomsRendered));
        } else {
          //if the room exists and is hidden 
          $(r).show();
        }
      }
    } else {
      //else if less than room count selected - hide
      for (var i = ++roomsSelected; i <= roomsRendered; i++) {
        $('#room-' + i).hide();
      }
    }
  });

  function setNewID(elem, i) {
    oldID = elem.attr('id');
    newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
    elem.attr('id', newId);
  }

  $('[id^="children-"]').change(function() {

    var kidsSelected = $('[id^="children-"] option:selected').val();

    for (i = 1; i <= kidsSelected; i++) {
      var htmlChildren = "<div class='col-xs-4 col-md-4 col-sm-4'><span class='labelselect'>Child 1</span><select class='form-control' id='childrenage" + i + "'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></div> ";
      $(".childrendiv").append(htmlChildren);
    }
    var kidsDisplayed = $('[id^="childrenage-"]:visible').length;
    var kidsRendered = $('[id^="childrenage-"]').length;


  });
});

label {
  font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='content' id='passengers-popover' style="width: 100%;">
  <div class="col-xs-12">
    <div class="col-xs-3">
      <label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
    </div>
    <div class="col-xs-9">
      <select name="" class="form-control" id="search_rooms_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
  <div class="col-xs-12 col-md-12 paddinglr labelform">
    <div class="col-xs-4 col-md-4 col-sm-4 paddingright">
      <label class="labelselect"></label>
    </div>
    <div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
      <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
        <label>Adults</label>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
        <label>Children(0-16)</label>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-12" id="room-1">
    <div class="col-xs-4 col-md-4">
      <label>
        Room:
      </label>
    </div>
    <div class="col-xs-8 col-md-8 paddinglr">
      <div class="col-xs-6 col-sm-6 col-md-6">
        <select class="form-control" id='adults-1'>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6">
        <select class="form-control" id='children-1'>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>
    <div class="childrendiv"> </div>
  </div>
  <div class="col-xs-12 no-padding">
    <button type="button" class="btn btn-default" id="continue">Continue</button>
  </div>
</div>