Javascript重复div包含表单的用户从dropbox中选择的次数

I'm trying to get the DIV "Passengers" to clone itself based on the value selected in "numpass".

This is only a snippet of the total code as it is a few hundred lines long as there are a lot of details. I have tried multiple ways of doing this and so far nothing has worked. I'm relatively new to Javascript, so any explanation with a reply would be good.

HTML

<table>
<tr>
<td class="form_label">Number of Passengers</td>
<td>
<select id="numpass" name="numpass" class="form_e"/>
<option value="1" selected="selected">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></td>
</tr>
</table>

<div id="passenger">
<div class="form_head">Passenger Details</div>
<br />
<table width="100%">

<tr>
<td class="form_label">First Name:&nbsp;<input type="text" name="cust_fname[]" class="form_f"/>&nbsp;&nbsp;&nbsp;Last Name:&nbsp;<input type="text" name="cust_lname[]" class="form_f"/>&nbsp;&nbsp;&nbsp;Phone:&nbsp;<input type="text" name="phone[]" class="form_g" />&nbsp;&nbsp;&nbsp;Weight (kg):&nbsp;<input type="text" name="weight[]" class="form_a" /></td>
</tr>
</table>

Consider using a for loop:

$('.numPax').onChange(function(){

  // Clear all but the first (consider if they change the value twice)
  $('.passenger').not(':first').remove();

  var currentNumPax = $('.passenger').length;
  var newNumPax = currentNumPax+1;

  var lastRepeatDiv = $('.passenger').last();
  for(i = 0; i < currentNumPax; i++) {

    var newDiv = lastRepeatingDiv.clone();

    newDiv.insertAfter(lastRepeatingDiv);
    newDiv.find("input").each(function (index, input) {
      input.name = input.name.replace("_" + currentCount, "_" + i);
    });

  });

}

Here is what I came up with.

Javascript

$('#numPax').change(function() {
    $('.passenger').not(':first').remove(); //remove all but the first    
    var currentNumPax = $(this).val(); // get the value from the select
    var newDiv, i;
    for(i = 0; i < currentNumPax; i++) {
        newDiv = $('.passenger').first().clone();
        $('#container').append(newDiv);
    }
});

HTML

<table>
    <tr>
        <td class="form_label">Number of Passengers</td>
        <td>
            <select id="numPax" name="numPax" class="form_e" >
                <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>
            </select>
        </td>
    </tr>
</table>

<div id="container">
    <div class="passenger">
        <div class="form_head">Passenger Details</div>
        <br />
        <table width="100%">
            <tr>
                <td class="form_label">First Name:&nbsp;<input type="text" name="cust_fname_1" class="form_f"/>&nbsp;&nbsp;&nbsp;Last Name:&nbsp;<input type="text" name="cust_lname_1" class="form_f"/>&nbsp;&nbsp;&nbsp;Phone:&nbsp;<input type="text" name="phone_1" class="form_g" />&nbsp;&nbsp;&nbsp;Weight (kg):&nbsp;<input type="text" name="weight_1" class="form_a" />
                </td>
            </tr>
        </table>
    </div>
</div>