javascript - I am using jquery repeater js library for repeat html but when i am trying to add element in nested repeater then outer repeater also called

Question

I am using jquery form repeater js library for repeat html but when I am trying to add elements in a nested repeater and then add a button inside the repeater then the outer repeater is also called and added on element of outer repeater.

Below is my jQuery and HTML code:

<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();
    }
  };
}();

question from:https://stackoverflow.com/questions/65642425/i-am-using-jquery-repeater-js-library-for-repeat-html-but-when-i-am-trying-to-ad

Answer 1

var FormRepeater = function() {
            var demo2 = function() {
                $('#m_repeater_3').repeater({
                    initEmpty: false,
                    defaultValues: {
                        'code': ''
                    },
                    repeaters: [{
                    // (Required)`enter code here`
                    // Specify the jQuery selector for this nested repeater
                    selector: '.inner-repeater'
                    }],


                    show: function() {
                        $(this).slideDown("slow", function() {});
                    },

                    hide: function(deleteElement) {
                        $(this).slideUp(deleteElement);
                    }
                });
            }
            return {
                // public functions
                init: function() {
                    demo2();
                }
            };
        }();