<!-- Javascript --><script src="libs/form-repeater/repeater.min.js"></script>

<form class="repeater-1"><div data-repeater-list="group-a"><div data-repeater-item><div class="row"><div class="col-md-3 col-sm-12 mb-3"><label for="name" class="form-label">Name</label><input type="email" class="form-control" name="name" id="name" placeholder="Enter email id"></div><div class="col-md-3 col-sm-12 mb-3"><label for="email" class="form-label">Email</label><input type="email" class="form-control" name="email" id="email" placeholder="Enter email id"></div><div class="col-md-3 col-sm-12 mb-3"><label for="profession" class="form-label">Profession</label><select name="profession" id="profession" class="form-control"><option>Select</option><option value="FontEnd Developer">Designer</option><option value="BackEnd Developer">Developer</option><option value="Business Analytics">Tester</option><option value="Project Coordinator">Manager</option></select></div><div class="col-md-3 col-sm-12"><div><label class="form-label"> </label></div><button class="btn btn-danger" data-repeater-delete>Delete</button></div></div></div></div><button type="button" class="btn btn-primary" data-repeater-create>Add</button></form>

$(document).ready(function(){$('.repeater-1').repeater()});

<form class="repeater-2"><button type="button" class="btn btn-primary mb-3" data-repeater-create>Add</button><div data-repeater-list="group-a"><div data-repeater-item><div class="row"><div class="col-md-2 col-sm-12 mb-3"><label for="username" class="form-label">Username</label><input type="text" class="form-control" name="username" id="username" placeholder="Username"></div><div class="col-md-2 col-sm-12 mb-3"><label for="phone" class="form-label">Phone</label><input type="text" class="form-control" name="phone" id="phone" placeholder="Enter email id"></div><div class="col-md-2 col-sm-12 mb-3"><div><label class="form-label"> </label></div><button type="button" class="btn btn-danger btn-floating" data-repeater-delete>Delete </button></div></div></div></div></form>

$('.repeater-2').repeater({hide:function(deleteElement){swal({title:"Are you sure?",text:"Are you sure you want to delete this element?",icon:"warning",buttons:true,dangerMode:true,}).then((willDelete) =>{if(willDelete){$(this).slideUp(deleteElement)}})}});

<form class="nested-repeater"><div data-repeater-list="outer-list"><div class="mb-3" data-repeater-item><p>Category</p><div class="d-flex mb-3"><input type="text" class="form-control" name="text-input"/><button class="btn btn-danger flex-shrink-0 ms-3" data-repeater-delete type="button">Delete </button></div><!-- innner repeater --><div class="card bg-light"><div class="card-body"><p>Products</p><div class="inner-repeater"><div data-repeater-list="inner-list"><div class="d-flex mb-3" data-repeater-item><input type="text" class="form-control" name="inner-text-input"/><button class="btn btn-danger flex-shrink-0 ms-3" data-repeater-delete type="button">Delete </button></div></div><button class="btn btn-primary" data-repeater-create type="button">Add Product </button></div></div></div></div></div><button class="btn btn-primary" data-repeater-create type="button">Add Category </button></form>

$('.nested-repeater').repeater({repeaters:[{selector:'.inner-repeater'}]});