html - 選択ボックスの値の変更に div を追加して正常に動作しない

Question

以下のコードは正常に動作しますが、選択ボックスの値が変更されるたびに選択した人のdivを追加および削除したいなど、いくつかの改善が必要です

このウェブサイトをチェックしてください http://www.travelnow.com/ 1 : http://www.travelnow.com/ 客室選択オプション機能

私のHTMLコード

<select id="roomOptions">
  <option value="1" selected="selected"> 1 </option>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
</select>
<br/>
<div id="text">
  <label> Adults (18+) </label>
  <label> Children (0-17) </label>
</div>
<div class="select-person">
  <label> Adults (18+) </label>
  <select>
    <option value="1"> 1 </option>
    <option value="2" selected="selected"> 2 </option>
  </select>
  <label> Children (0-17) </label>
  <select>
    <option value="0" selected="selected"> 0 </option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
  </select>
</div>

私のスクリプト

$('select#roomOptions').change(function () {
    $('div#text select').remove();  
    var val = $(this).val();    
    for (var x = 1; x < val; x++) {
       var createSelectBox = '<select id="adults"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select><select id="children"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select>';
     $('div#text').append(createSelectBox);
    }   
});