количество текстовых полей равно числу выбран из выпадающего меню

Question

http://jsfiddle.net/bbh2y4dL/5/

HTML

<table> 
<tr> 
    <td> 
     <select class="form-control mySelectBoxClass childage" name="noofchilds[]"> 
      <option selected>0</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
     </select> 
    </td> 
</tr> 
</table> 

<a class="repeat">ADD MORE</a> 
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" class="add" style="display:none">Add Age</a> 

<div id="light" class="white_content"> 
<div class="textboxDiv"></div><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> 

</div> 
<div id="fade" class="black_overlay"></div> 

CSS

.black_overlay { 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: rgba(0, 0, 0, 0.5); 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
} 
.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 50%; 
height: 50%; 
padding: 16px; 
border-radius:7px; 
background-color: rgba(255, 255, 255, 1); 
z-index:1002; 
overflow: auto; 
} 
.form-control { 
display: block; 
width: 100%; 
height: 26px; 
padding: 2px 0px 2px 12px; 
font-size: 14px; 
line-height: 1.428571429; 
color: #010F2B; 
vertical-align: middle; 
background-color: #E6E8E9; 
border: 2px solid #ebebeb; 
border-radius: 4px; 
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
    } 

Javascript

$(function() { 
$(".repeat").on('click', function (e) { 
    e.preventDefault(); 
    var $self = $(this); 
    $self.before($self.prev('table').clone()); 
}); 
}); 

$(document).ready(function() { 
$(".childage").change(function() { 
    var selVal = $(this).val(); 
    $(".textboxDiv").html(''); 
    if (selVal > 0) { 
     $(".add").css("display", "block"); 
     for (var i = 1; i <= selVal; i++) { 
      $(".textboxDiv").append('<input type="text" class="form-control" /><br>'); 
     } 
    } else { 
     $(".add").css("display", "none"); 
    } 
}); 
}); 

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