Clone within Another Clone. The Child Clone works only within the Parent and not inside the Parent Clones

Question

I am trying to clone an element which has another clone within it. problem is the child clone works inside the parent element but not within the parent's cloned elements

// Parent clone
    $('.experiences').on('click', '.experience_delete', function() {
         $(this).closest('.experience_cloned').remove(); 
    });
    $('.experiences').on('click', '.experience_increment', function() {
        $('.experience_increment').closest('.experiences').find('.experience_cloned').first().clone().append($('<br><button class="experience_delete" type="button">Delete</button>')).appendTo('.clone-experience');
    });
    
    
    //Child clone
    $('.best_project').on('click', '.best_project_delete', function() {
         $(this).closest('.best_project_cloned').remove(); 
         //alerts can be added here
    });

    $('.best_project').on('click', '.best_projects_increment', function() {
        $(this).closest('.best_project').find('.best_project_cloned').first().clone().append($('<br><button class="best_project_delete" type="button">Delete</button>')).appendTo('.clone-best_projects');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is a Parent Clone    
    <!-- Parent Clone -->
    <div class="experiences">
        <!-- Parent Clone Contents -->
        <div class="experience_cloned" style="padding-bottom: 20px;">

            <div style="border:1px solid black; padding:20px; width: 120px;">
              <!-- Child Clone -->
              <div class="best_project">

                    <!-- Child Clone Contents -->
                    <div class="best_project_cloned">  
                        This is a Child 
                    </div>

                    <!-- Child's Clones Here -->
                    <div class="clone-best_projects"></div>

                    <!-- Add button of the Child Clone-->
                <div>
                    <br>
                    <button class="best_projects_increment" type="button">Add Child Clone</button>
                </div>
  
              </div>   
            </div>     
        </div> 

        <!-- Parent's Clones Here -->
        <div class="clone-experience"></div>

        <!-- Add button of the parent Clone -->
        <div>
            <button class="experience_increment " type="button">Add Parent Clone</button>
        </div>

I hope my question is clear, i have been struggling to find the correct words to ask what i need.

Answer 1

When you create new elements events are not set so You just need to set click events after clone the parent. Here i create a function set_Child_Clone_Events(); which is set event on new cloned child

script

// Parent clone
                $('.experiences').on('click', '.experience_delete', function() {
                     $(this).closest('.experience_cloned').remove(); 
                });
                $('.experiences').on('click', '.experience_increment', function() {
                    
    
    $('.experience_increment').closest('.experiences').find('.experience_cloned').first().clone().append($('<br><button class="experience_delete" type="button">Delete</button>')).appendTo('.clone-experience');
                set_Child_Clone_Events()
            });
        
        // call Child clone function
            set_Child_Clone_Events()
            
        //Child clone function
            function set_Child_Clone_Events() {
            $('.best_project').on('click', '.best_project_delete', function() {
                 $(this).closest('.best_project_cloned').remove(); 
                 //alerts can be added here
            });
        
$(".best_projects_increment").unbind().click(function() {
                var obj = $(this)
                $(this).parents('.best_project').find('.best_project_cloned').first().clone().append($('<br><button class="best_project_delete" type="button">Delete</button>')).appendTo($(obj).parents('.best_project').find('.clone-best_projects'));
                set_Child_Clone_Events()
              })
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        This is a Parent Clone    
        <!-- Parent Clone -->
        <div class="experiences">
            <!-- Parent Clone Contents -->
            <div class="experience_cloned" style="padding-bottom: 20px;">
    
                <div style="border:1px solid black; padding:20px; width: 120px;">
                  <!-- Child Clone -->
                  <div class="best_project">
    
                        <!-- Child Clone Contents -->
                        <div class="best_project_cloned">  
                            This is a Child 
                        </div>
    
                        <!-- Child's Clones Here -->
                        <div class="clone-best_projects"></div>
    
                        <!-- Add button of the Child Clone-->
                    <div>
                        <br>
                        <button class="best_projects_increment" type="button">Add Child Clone</button>
                    </div>
    
                  </div>   
                </div>     
            </div> 
    
            <!-- Parent's Clones Here -->
            <div class="clone-experience"></div>
    
            <!-- Add button of the parent Clone -->
            <div>
                <button class="experience_increment " type="button">Add Parent Clone</button>
            </div>
    
        </div>