<x-base-layout>
 @section("scripts")
 <script src="{{ asset("demo1/plugins/custom/formrepeater/formrepeater.bundle.js") }}"></script>
 <script>
 $(document).ready(function() {
 $(".repeater").repeater({
 // (Optional)
 // start with an empty list of repeaters. Set your first (and only)
 // "data-repeater-item" with 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
 })
 });
 </script>
 @endsection
 <form class="repeater">
 <!--
 The value given to the data-repeater-list attribute will be used as the
 base of rewritten name attributes. In this example, the first
 data-repeater-item"s name attribute would become group-a[0][text-input],
 and the second data-repeater-item would become group-a[1][text-input]
 -->
 <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>
</x-base-layout>