I am using jquery form repeater js library for repeat html but when i am trying to add nested repeater then and add button of insider repeater then outer repeater also called and add on element of outer repeater

I am using jquery form repeater js library for repeat html but when i am trying to add nested repeater then and add button of insider repeater then outer repeater also called and add on element of outer repeater

<div id="m_repeater_3">
    <div class="form-group form-group-last row" id="m_repeater_3">
        <div data-repeater-list="color" class="col-lg-10">
            <div class="form-group row align-items-center">
                <div class="col-md-3">
                    <div class="m-form__group--inline">
                        <div class="m-form__label">
                            <label class="m-label m-label--single">Color:</label>
                        </div>
                    </div>
                </div>
            </div>
            <div data-repeater-item class="form-group row align-items-center">
                <div class="col-md-3">
                    <div class="m-form__group--inline">
                        <div class="m-form__control">
                            <input type="text" class="form-control" name="color" placeholder="Color" required="required">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m-form__group--inline">
                        <div class="m-form__control">
                            <input type="file" class="form-control" name="image_4" required="required">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
                        <i class="la la-trash-o"></i>
                    </a>
                </div>
                <div id="m_repeater_2">
                    <div class="form-group form-group-last row" id="m_repeater_2">
                        <div data-repeater-list="stock" class="col-lg-10">
                            <div class="form-group row align-items-center">
                                <div class="col-md-3">
                                    <div class="m-form__group--inline">
                                        <div class="m-form__label">
                                            <label class="m-label m-label--single">Size:</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="m-form__group--inline">
                                        <div class="m-form__label">
                                            <label class="m-label m-label--single">Stock:</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-repeater-item class="form-group row align-items-center">
                                <div class="col-md-3">
                                    <div class="m-form__group--inline">
                                        <div class="m-form__control">
                                            <input type="text" class="form-control" name="Size" placeholder="Color" required="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="m-form__group--inline">
                                        <div class="m-form__control">
                                            <input type="text" class="form-control" name="stock" placeholder="Color" required="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
                                        <i class="la la-trash-o"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-last row">
                        <label class="col-lg-2 col-form-label"></label>
                        <div class="col-lg-4">
                            <a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
                                <i class="la la-plus"></i> Add
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group form-group-last row">
        <label class="col-lg-2 col-form-label"></label>
        <div class="col-lg-4">
            <a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
                <i class="la la-plus"></i> Add
            </a>
        </div>
    </div>
</div>

**Here is my jquery function which i am using for repeater**

var FormRepeater = function() {
        var demo2 = function() {
            $('#m_repeater_3').repeater({
                initEmpty: false,
                defaultValues: {
                    'code': ''
                },
                show: function() {
                    $(this).slideDown("slow", function() {});
                },
                hide: function(deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        }
        var demo3 = function() {          
          $('#m_repeater_2').repeater({
              initEmpty: false,
              defaultValues: {
                  'code': ''
              },
              show: function() {
                  $(this).slideDown("slow", function() {});
              },
              hide: function(deleteElement) {
                  $(this).slideUp(deleteElement);
              }
          });
      }
        return {
            // public functions
            init: function() {
                demo2();
                demo3();
            }
        };
    }();