FormValidation creates an interface to add and remove a repeatable group of input elements. For more info see the official Github repository.
Nested Example
$('#kt_docs_repeater_nested').repeater({
repeaters: [{
selector: '.inner-repeater',
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
}],
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});<!--begin::Repeater-->
<div id="kt_docs_repeater_nested">
<!--begin::Form group-->
<div class="form-group">
<div data-repeater-list="kt_docs_repeater_nested_outer">
<div data-repeater-item>
<div class="form-group row mb-5">
<div class="col-md-3">
<label class="form-label">Name:</label>
<input type="email" class="form-control mb-2 mb-md-0" placeholder="Enter full name" />
</div>
<div class="col-md-3">
<div class="inner-repeater">
<div data-repeater-list="kt_docs_repeater_nested_inner" class="mb-5">
<div data-repeater-item>
<label class="form-label">Number:</label>
<div class="input-group pb-3">
<input type="email" class="form-control" placeholder="Enter contact number" />
<button class="border border-secondary btn btn-icon btn-flex btn-light-danger" data-repeater-delete type="button">
<i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
</button>
</div>
</div>
</div>
<button class="btn btn-sm btn-flex btn-light-primary" data-repeater-create type="button">
<i class="ki-duotone ki-plus fs-5"></i>
Add Number
</button>
</div>
</div>
<div class="col-md-2">
<div class="form-check form-check-custom form-check-solid mt-2 mt-md-11">
<input class="form-check-input" type="checkbox" value="" id="form_checkbox" />
<label class="form-check-label" for="form_checkbox">
Primary
</label>
</div>
</div>
<div class="col-md-4">
<a href="javascript:;" data-repeater-delete class="btn btn-sm btn-flex btn-light-danger mt-3 mt-md-9">
<i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
Delete Row
</a>
</div>
</div>
</div>
</div>
</div>
<!--end::Form group-->
<!--begin::Form group-->
<div class="form-group">
<a href="javascript:;" data-repeater-create class="btn btn-flex btn-light-primary">
<i class="ki-duotone ki-plus fs-3"></i>
Add Row
</a>
</div>
<!--end::Form group-->
</div>
<!--end::Repeater-->
2024©
Keenthemes
