how can i append textbox based on dynamic created dropdown children on changes
<p>i want to add child text boxes on the selection of child dropdown counting. I have try the separate code on jsfiddle which is working <a href="http://jsfiddle.net/hs7t8/" rel="nofollow">http://jsfiddle.net/hs7t8/</a> . There are two dropdown list are created on the selection of guest selection dropdown . it dynamically generates two drop down on add room button click. first one is adult and second is children. On the selection of children dropdown i want to text boxes accroding to the selection of the children dropdown. but it is not adding to page. please Help me out .complete running code on <a href="http://jsfiddle.net/pYRj3/1/" rel="nofollow">http://jsfiddle.net/pYRj3/1/</a></p>

<pre><code>$('#guestsRoomsSelect').change(function () {

        if ($(this).val() === '0') {
               var $var2 = '&lt;div id="dropdown2_ ' + (counter) + ' " class="class1"&gt; &lt;div class="wrapadults" style="float:left"&gt; &lt;label class="lbl_sm" style="font-size: 0.75em" for="adults"&gt;Adults&lt;/label&gt;'
                $var2 = $var2 + '&lt;br/&gt;&lt;span&gt; &lt;span&gt;     &lt;select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;"&gt;      &lt;option value="1"&gt;1&lt;/option&gt;        &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;'
                $var2 = $var2 + '&lt;option value="3"&gt;3&lt;/option&gt;       &lt;option value="4"&gt;4&lt;/option&gt;        &lt;option value="5"&gt;5&lt;/option&gt;        &lt;option value="6"&gt;6&lt;/option&gt;        &lt;option value="7"&gt;7&lt;/option&gt;'
                $var2 = $var2 + '&lt;option value="8"&gt;8&lt;/option&gt;       &lt;option value="9"&gt;9&lt;/option&gt;        &lt;option value="10"&gt;10&lt;/option&gt;      &lt;/select&gt;     &lt;/span&gt;       &lt;/span&gt;  &lt;/div&gt;'
                $var2 = $var2 + '&lt;div class="children" &gt; &lt;label class="lbl_sm" style="font-size: .75em;" for="children"&gt;Children&lt;/label&gt;&lt;br/&gt; &lt;span&gt;  &lt;select id="hc_f_children" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;"&gt;'
                $var2 = $var2 + '&lt;option value="0" selected="selected"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt;'
                $var2 = $var2 + '&lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;/span&gt;  &lt;/div&gt;   &lt;/div&gt;';
                $("#Addition").prepend('&lt;fieldset id="' + counter + '" data-index="' + index + '"&gt;' + $var2 + '&lt;/fieldset&gt;');
                counter = counter + 1;
                index++;

                $('#roomconfig').show(300);

        }
        else if ($(this).val() === '1-1' || $(this).val() === '3-1' || $(this).val() === '4-1' || $(this).val() === '2-2' || $(this).val() === '2-1') {

          $('#roomconfig').hide(300);

            $('#Addition fieldset :first').remove();  
        } });

    var forage = 0;
    $(".addRoom").click(function () {
        // on add room event

        var $var1 = '&lt;div id="dropdown2_ ' + (counter) + ' " class="class1"&gt; &lt;div class="wrapadults" style="float:left"&gt; '
        $var1 = $var1 + '&lt;span&gt; &lt;span&gt;      &lt;select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;"&gt;      &lt;option value="1"&gt;1&lt;/option&gt;        &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;'
        $var1 = $var1 + '&lt;option value="3"&gt;3&lt;/option&gt;       &lt;option value="4"&gt;4&lt;/option&gt;        &lt;option value="5"&gt;5&lt;/option&gt;        &lt;option value="6"&gt;6&lt;/option&gt;        &lt;option value="7"&gt;7&lt;/option&gt;'
        $var1 = $var1 + '&lt;option value="8"&gt;8&lt;/option&gt;       &lt;option value="9"&gt;9&lt;/option&gt;        &lt;option value="10"&gt;10&lt;/option&gt;      &lt;/select&gt;     &lt;/span&gt;       &lt;/span&gt;  &lt;/div&gt;'
        $var1 = $var1 + '&lt;div class="children" &gt; &lt;span&gt;  &lt;select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;" onselect="getIdvalue()"&gt;'
        $var1 = $var1 + '&lt;option value="0" selected="selected"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt;'
        $var1 = $var1 + '&lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;/span&gt;  &lt;/div&gt; &lt;div id="chileage_'+forage+'" class="ch"&gt;&lt;/div&gt;  &lt;/div&gt;'
        $var1 = $var1 + '&lt;div class="btnrmv" id="' + counter + '" &gt; &lt;a class="removeRoom " style=" width:30px; height:0px; margin:0px;left:200px;position:relative; top:-30px; background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);"&gt;remove&lt;span&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;';

        $("#Addition").append('&lt;fieldset id="' + counter + '" data-index="' + index + '"' + $var1 + '&lt;/fieldset&gt;');

        counter++;
        index++;
        forage++;
        // for remove element
        $(".btnrmv").click(function () {
            $("#roomconfig fieldset#" + this.id).remove();
            counter--;

        });

        var Idvalue = null;
        // Add childage textbox
        function getIdvalue() {
            Idvalue = $('.hc_evt_children').attr("id");


        }

        $(Idvalue).change(function () {

            var index1 = $(".ch input").size();
            var requested = parseInt($(".hc_evt_children").val(), 5);

            if (requested &gt; index1) {
                for (i = index1; i &lt; requested; i++) {
                    var $ctrl = $('&lt;input/&gt;').attr({ type: 'text', name: 'text', value: '' });
                    $("#chileage_" + forage).append($ctrl);
                }
            }
            else if (requested &lt; index1) {
                var x = requested - 1;
                $("#chileage_ input:gt(" + x + ")").remove();
            }
        });


    });
</code></pre>

 



<pre><code>    &lt;div class="btnWrap" style="clear:both;border-bottom: 0.5px solid #FFFFFF;"&gt;
</code></pre>

<p>
Add room
    </p>

<p></p>
