<!-- 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'}]});