jQuery: Set clone number by SELECT option

Question

I have a SELECT where I choose how many children I have, and next gets the right amount of inputs. This snippit clones and adds the number. So if you choose 4 two times, the amount of inputs would be 8. How can I make it a fixed amount of clones, and not added clones?

Further more, I would like to add ID (I called it 'userInputID' in the script but it doesn't work) or NAMEs to each Clone. How do I do this as well?

        //Add the right amount inputs based on SELECT option clicked
        $('select.linkedToNext').change(function() {
           // Get number of children chosen
           var childrenCount = $(this).val(),
               // Get a reference to the first input group so we can clone it
               userInputID = $(".linkedToPrev div").index();
               birthday = $('.linkedToPrev div:first').attr('name', userInputID);

           // Clone per number chosen
           for (var i = 0; i < childrenCount; i++) {
                // Insert clone after original.
                // IRL, you probably need to do some preprocessing on it first.
                birthday.clone().insertAfter(birthday);
                $(this).parent().next(".linkedToPrev").slideDown('slow');
           }
        });

Can you guys help me here? I guess I went over my head on this one... :-(

Answer 1

First, you should change var childrenCount = $(this).val() to this:

var childrenCount = $(this).find('option:selected').val()

Further more, I would like to add ID (I called it 'userInputID' in the script but it doesn't work) or NAMEs to each Clone.

That can be done like this:

birthday
    .clone()
    .attr('name', 'somenamehere')
    .attr('id', 'elemIdHere')
    .insertAfter(birthday);