Cloning User Inputs

Hi,

Looking for some help with a booking form that i have already created (which is working fine).

The booking form currently has a 'select' dropdown with a number range of 1-10 (number of learners for the course).

<div class="user_bf_input">
<label for="course_qty">Number of Learners:</label>
<select name="course_qty" id="course_qty" class="course_qty">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>

Select allOpen in new window

When the number is changed in the user select, depending on the number chosen, the below html div gets cloned x number selected and the input name changes (number incremented on the end of name field).

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname1" size="30" class="required" />
</div>

Select allOpen in new window

Example of generated HTML if '2' is selected in dropdown.

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname1" size="30" class="required" />
</div>
<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input type="text" name="pname2" size="30" class="required" />
</div>

Select allOpen in new window

The current JS code that works for this as below (First couple lines can be ignored).

$("#course_qty").change(function() {
    var price = parseFloat($('#course_cost').val(), 10);
    var qty = (parseInt($('#course_qty').val(), 10) || 0);
    var total = (price*qty).toFixed(2);
    $("#course_total").val(total);
    var x = $('#course_qty').val();
    $('#quantity').val(x);

    input = $('.learner_input .user_bf_input').eq(0).clone();
    $('input', input).val('');
    $('.learnerNames').val('');
    $('.learner_input .input_area').empty();
    for (var i=1; i<=$(this).val(); i++) {
        $('input', input).attr('name', 'pname'+i);
        $(input).clone().appendTo(".learner_input .input_area");
    };
});

Select allOpen in new window

I was looking to add three inputs in as below and have them all cloned like above but now with a incrementing input id and different names for each input.

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-" name="pname1" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-" name="pusi1" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-" name="pemail1" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>

Select allOpen in new window

So the output generated would be something like this if '2' was selected:

<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-1" name="pname1" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-1" name="pusi1" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-1" name="pemail1" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>
<div class="user_bf_input">
<label>*Learners Full Name:</label>
<input id="learnerName-2" name="pname2" type="text" class="required learnerInputBox" placeholder="First Middle Last" size="24" />
<input id="learnerUSI-2" name="pusi2" type="text" class="required learnerInputBox" placeholder="USI Number" size="24" />
<input id="learnerEmail-2" name="pemail2" type="text" class="required learnerInputBox" placeholder="learner@example.com" size="24" />
</div>

Select allOpen in new window

All help would be greatly appreciated.
Thanks!