Appending to dyanamicly generated element - Jquery

Question

I wanted to append bunch of html dropdowns to a row of dynamically generated element.

<div class="row row-room cf">
<span class="roomNo">Room <span>1</span></span>
<div class="inputsection adult">
    <i class="small-icon-person"></i>
    <div class="inputbox">
        <div class="custom-select-v3">
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            <span></span>
        </div>
    </div>
</div>
<div class="inputsection child">
    <i class="small-icon-person-small"></i>
    <div class="inputbox">
        <div class="custom-select-v3">
            <select class="hotel-child-dropDown">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <span></span>
        </div>
    </div>
</div>  


<div class="specify-wrap">                                                            
   <!--Here i want to add some dropdowns -->
</div>


<i class="small-icon-x-red">remove room</i>
</div>

I will clone this entire structure 6 or less time, and once i change the hotel-child-dropDown i want to add some more dropdowns to <div class="specify-wrap"> the problem what im facing here is, once i change the drop down all the <div class="specify-wrap"> is getting generated with the same dropdowns on all cloned element.

My code :

$('.hotel-child-dropDown').each(function(){
    $(this).change(function(){
        var el = $(this).parents('.row').find('.specify-wrap');
        var val = $(this).val();
        el.empty();
        var html = 
                    '<div class="inputsection">'+
                    '  <div class="inputbox childMargin">'+
                    '   <div class="custom-select-v3">'+
                    '       <select>'+
                    '           <option>0</option>'+
                    '           <option>1</option>'+
                    '           <option>2</option>'+
                    '           <option>3</option>'+
                    '           <option>4</option>'+
                    '       </select>'+
                    '       <span></span>'+
                    '   </div>'+
                    ' </div>'+
                    '</div>';

        for(var i=0; i<val; i++)
        {
            el.append(html);
        }
        console.log(val);
    });
});

Fiddle Link : enter link description here Is there any better solution to overcome this situation??

Answer 1

Here is Updated Fiddle

while you are cloning div use clone(true). like this

$("#add").on("click",function(){
    var rowDiv = $(".row:first").clone(true);
    rowDiv.insertBefore("#add");
});

and instead of using .each() , directly attach change event on the element. like this

$(".hotel-child-dropDown").on("change",function(){
    var el = $(this).parents('.row').find('.specify-wrap');
    var val = $(this).val();
    el.empty();
    var html = 
                '<div class="inputsection">'+
                '  <div class="inputbox childMargin">'+
                '   <div class="custom-select-v3">'+
                '       <select>'+
                '           <option>0</option>'+
                '           <option>1</option>'+
                '           <option>2</option>'+
                '           <option>3</option>'+
                '           <option>4</option>'+
                '       </select>'+
                '       <span></span>'+
                '   </div>'+
                ' </div>'+
                '</div>';

    for(var i=0; i<val; i++)
    {
        el.append(html);
    }
    console.log(val);
});