1. Initialize the plugin by referencing the necessary files:

                
                    <script src="jquery.repeater.js"></script>
                
            

2. The component will bind to any existing DOM element.

                
                    <form class="repeater">
                        
                        <div data-repeater-list="group-a">
                            <div data-repeater-item>
                                <input type="text" name="text-input" value="A"/>
                                <input data-repeater-delete type="button" value="Delete"/>
                            </div>
                            <div data-repeater-item>
                                <input type="text" name="text-input" value="B"/>
                                <input data-repeater-delete type="button" value="Delete"/>
                            </div>
                        </div>
                        <input data-repeater-create type="button" value="Add"/>
                    </form>
                
            

3. How to use.

                
                    $('.repeater').repeater({
                        // (Optional)
                        // start with an empty list of repeaters. Set your first (and only)
                        // "data-repeater-item" with style="display:none;" and pass the
                        // following configuration flag
                        initEmpty: true,
                        // (Optional)
                        // "defaultValues" sets the values of added items.  The keys of
                        // defaultValues refer to the value of the input's name attribute.
                        // If a default value is not specified for an input, then it will
                        // have its value cleared.
                        defaultValues: {
                            'text-input': 'foo'
                        },
                        // (Optional)
                        // "show" is called just after an item is added.  The item is hidden
                        // at this point.  If a show callback is not given the item will
                        // have $(this).show() called on it.
                        show: function () {
                            $(this).slideDown();
                        },
                        // (Optional)
                        // "hide" is called when a user clicks on a data-repeater-delete
                        // element.  The item is still visible.  "hide" is passed a function
                        // as its first argument which will properly remove the item.
                        // "hide" allows for a confirmation step, to send a delete request
                        // to the server, etc.  If a hide callback is not given the item
                        // will be deleted.
                        hide: function (deleteElement) {
                            if(confirm('Are you sure you want to delete this element?')) {
                                $(this).slideUp(deleteElement);
                            }
                        },
                        // (Optional)
                        // You can use this if you need to manually re-index the list
                        // for example if you are using a drag and drop library to reorder
                        // list items.
                        ready: function (setIndexes) {
                            $dragAndDrop.on('drop', setIndexes);
                        },
                        // (Optional)
                        // Removes the delete button from the first list item,
                        // defaults to false.
                        isFirstItemUndeletable: true
                    });
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Plugin Link	https://github.com/DubFriend/jquery.repeater
Template Page	https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-repeater.html