Question

I am using a select box to clone a div (based on numerical selection) and increment the IDs and labels of the new divs. I have this working but my problem is that if you select a number larger than 2 the divs do not increment in order. They do if you select 2 then 3 then 4 etc.

Basically, if you select 3 in the select box I want the result to be:

Membership Program for Adult #1
Membership Program for Adult #2
Membership Program for Adult #3

Rather than:

Membership Program for Adult #1
Membership Program for Adult #3
Membership Program for Adult #2

Here Is my JS:

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

        if (roomsSelected > 0) {
            $('.membership-programs.adult label').show();
        }
        else {
            $('.membership-programs.adult label').hide(); 
        }

        //if room count is greater than number displayed - add or show accordingly
        if (roomsSelected > roomsDisplayed) {
            for (var i=1;i<=roomsSelected;i++){
                var r = $('#program-' + i);
                if (r.length == 0) {
                    var clone = $('#program-1').clone(); //clone
                    clone.children(':first').text("Membership Program for Adult #"+i);

                    //change ids appropriately
                    setNewID(clone, i);
                    clone.children('div').children('select').each(function() {
                        setNewID($(this),i);
                    });
                    $(clone).insertAfter($('#program-'+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++){
                $('#program-'+i).hide();
            }
        }
    });

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

Here Is my HTML:

<div id="hotel-guests">
    <span class="wrapper">
        <label for="num-adults"># of Adults:</label>
        <select tabindex="4" name="amtrakadults" id="num-adults" class="traveler-dropdown">
            <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>
            <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>
        </select>
    </span>    
</div>
<div class="membership-programs adult">
    <div id="program-1" class="program">
        <span>Membership Program for Adult #1:</span>
        <span class="wrapper">
            <select tabindex="4" name="program" class="membership-program">
                <option value="None">None</option>
                <option value="AAA">AAA</option>
                <option value="Student Advantage">Student Advantage</option>
                <option value="Veterans Advantage">Veterans Advantage</option>
                <option value="NARP">NARP</option>
                <option value="ISIC">ISIC</option>
            </select>
        </span>
    </div>
</div>​

Here is a fiddle displaying the problem.

Answer 1

Change this:

$(clone).insertAfter($('#program-'+roomsRendered));

To this:

$(clone).appendTo('.membership-programs');

Updated fiddle