Here is my php file code

<div id='immunization_records_list'>
    <div class="container immunization_records_list_container p-0" data-repeater-list="immunization_records_list">
        <ul class="immunization_records_list_ul row" data-repeater-item>
            <div class="col-md-10">
                <li class="immunization_records_li col-md-5">
                    <div id="dose_list">
                        <div data-repeater-list="dose_list">
                            <ul data-repeater-item>
                                <li class="">
                                    <label class='gfield_label'>Dose Date</label>
                                    <input name='dose' type='date' value='' class='form-control'> 
                                </li>
                                <li class="actions col-md-2">
                                    <a class="btn btn-danger" type="button" value="Delete" data-repeater-delete ><i class="fa fa-times-circle"></i></a>
                                </li>
                            </ul>
                        </div>
                        <div class="container p-0">
                            <input class="btn btn-secondary add_dose_btn" type="button" value="Add New Dose" data-repeater-create  />
                        </div>
                    </div>
                </li>
            </div>
            <li class="actions col-md-2">
                <a class="btn btn-danger delete-btn " type="button" value="Delete" data-repeater-delete ><i class="fa fa-times-circle"></i></a>
            </li>
            <hr class="separator">
        </ul>
    </div>
    <div class="container p-0">
        <input class="btn btn-secondary new-ir-button " type="button" value="Add New Immunization Record" data-repeater-create />
    </div>
</div>

here is the jquery repeater

jQuery('#immunization_records_list').repeater({
    show: function () {
        jQuery(this).slideDown();
    },
    hide: function (deleteElement) {
        Swal({
            title: 'Are you sure?',
            text: "You want to delete this Field?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                jQuery(this).remove();
            }
        });
    },
    ready: function (setIndexes) {
        console.log(setIndexes);
    }
});
jQuery('#dose_list').repeater({ 
    show: function () { 
        jQuery(this).slideDown(); 
    },
    hide: function (deleteElement) {
        Swal({
            title: 'Are you sure?',
            text: "You want to delete this Field?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                jQuery(this).remove();
            }
        });
    },
    ready: function (setIndexes) {
        console.log(setIndexes);
    }
});

When I click the inner repeater add dose button it creates the inner div as well as the outer repeater div whereas I just want it to add only inner repeater div. Outer repeater div should be repeated only on the add new immunization button as it is the outer repeater create button. How can I do this?