Buttons from cloned section not working properly

Question

I'm new to jquery scripts. I managed to clone one section of the form dynamically but my button to display the ckeditor's div in the cloned section is not working. It still listening to the button from the original section and will only show the ckeditor's div(but unable to edit all of them except the original) when the original button was clicked. Here is my code:-

for(i=num; i<value; i++){
    var newSlot = $('#slot' + i).clone().attr('id','slot' + (i+1));

    newSlot.find('.heading-slot').attr('id', 'ID' + (i+1) + '_slot').html('Slot ' + (i+1)); //add new slot name

    newSlot.find('.other_message').hide();
    newSlot.find('.select_instruction').on('change', function () {  
        $(this).next('.other_message').toggle((this.value) == "Other")
    });


    newSlot.find('.extra_instruction').hide();
    //the button here is not working as I wanted
    newSlot.find('.btnAdditional').on('click', function(){
        $(this).next('.extra_instruction').show();
    });

    $('#slot' + i).after(newSlot);
}

html code

    <div class="col-sm-6">
        <button type="button" id="btn_Additional" name="btn_Additional" class="btnAdditional btn btn-info">Additional Instruction</button>
            <div class="extra_instruction">
                <textarea id="input_add_instruction" name="add_instruction[]" class="form-control"></textarea>
<script>CKEDITOR.replace( 'input_add_instruction' );</script>
            </div>
    </div>

Can anyone guide me on this?? Please I'm very new to this. Thanks in advances..

Answer 1

clone函数不仅可以克隆html，还可以克隆事件监听器，而不是克隆，请尝试创建您的元素并正确添加事件监听器。