How to create remove and add more inputs functionality with input type file and text in Laravel?

Create remove and add more inputs functionality with input type file and text in Laravel

Blade file code   

  <form action="{{ route('storeDocuments') }}" method="post" enctype="multipart/form-data">

        @csrf

        <div id="inputFields">

            @if(!empty($documents[0]))

            @php $counter = 1000; @endphp

                @foreach($documents as $document)

                    <input type="hidden" id="document_id" name="documents[{{$counter}}][document_id]" value="{{$document->id}}">

                    <div class="field">

                        <label for="title">Title:</label>

                        <input type="text" id="title" class="title_input" name="documents[{{$counter}}][title]" value="{{$document->title}}" required>

                        <label for="description">Description:</label>

                        <textarea id="description" class="description_input" name="documents[{{$counter}}][description]">{{$document->description}}</textarea>

                        <label for="file">File:</label>

                        @if(!empty($document->file_path))

                        <a href="{{$document->file_path}}" class="doc_file">Download</a>

                        @endif

                        <input type="file" id="file" class="file_input" name="documents[{{$counter}}][file]" required>

                        <button class="remove">Remove</button>

                    </div>

                    @php $counter++ @endphp

                @endforeach

            @endif

            <div class="field">

                <label for="title">Title:</label>

                <input type="text" id="title" class="title_input" name="documents[0][title]" required>

                <label for="description">Description:</label>

                <textarea id="description" class="description_input" name="documents[0][description]"></textarea>

                <label for="file">File:</label>

                <input type="file" id="file" class="file_input" name="documents[0][file]" required>

                <button class="remove">Remove</button>

            </div>

        </div>

        <button id="addButton">Add More</button>

        <div class="col-sm-12">

            <div class="form-group mt-3">

                <div class="form-group submit">

                    <div class="form-submit">

                        <input type="submit" value="Submit" class="btn btn-success btn-lg" />

                    </div>

                </div>

            </div>

        </div>

    </form>

  <script>

    $(document).ready(function() {

       function removeButton(){

            var removeButtons = $(".remove");

            if (removeButtons.length == 1) {

                removeButtons.hide();

            }

            else{

                removeButtons.show();

            }

            console.log(removeButtons.length);

        }

        removeButton();

        $(".field").find('.remove').click(function() {

          $(this).parent().remove();

          removeButton();

        });

        let documentIndex = 1; // Initialize the document index

        $('#addButton').click(function(e) {

            documentIndex++;

            e.preventDefault();

            var newField = $('.field:last').clone();

            newField.find('.title_input').attr('name', 'documents[' + documentIndex + '][title]');

            newField.find('.description_input').attr('name', 'documents[' + documentIndex + '][description]');

            newField.find('.file_input').attr('name', 'documents[' + documentIndex + '][file]');

            newField.find('input').val('');

            newField.find('textarea').val('');

            $('#inputFields').append(newField);

            removeButton();

            // Add event listener for remove button

            newField.find('.remove').click(function() {

            $(this).parent().remove();

            removeButton();

            });

        });

    });

  </script>

Controller file

    public function store(Request $request,BaseHttpResponse $response)

    {

        $customer = auth('customer')->user();

        if(!empty($request->documents)){

            $documents = $request->documents;

            $insert_data = [];

            foreach($documents as $document){

                if(empty($document["title"]) && empty($document["description"]) && empty($document["file"])){

                    continue;

                }

                if(!empty($document["file"])){

                    // Accessing uploaded file from the request

                    $uploadedFile = $document["file"];

                    // Check if a file was uploaded

                    if ($uploadedFile && $uploadedFile->isValid()) {

                        // Get the original file name

                        $originalFileName = $uploadedFile->getClientOriginalName();

                        // Generate a unique filename

                        $uniqueFileName = pathinfo($originalFileName, PATHINFO_FILENAME) . '_' . time() . '.' . $uploadedFile->getClientOriginalExtension();

                        // Store the file in the storage disk with a unique filename

                        $storagePath = "documents" . "/" . $uniqueFileName;

                        $filePath = Storage::disk('uploads')->putFileAs('documents', $uploadedFile, $uniqueFileName);

                        $insert_data["file_path"] = $storagePath;                    

                    }

                }

                if(!empty($document["title"])){

                    $insert_data["title"] = $document["title"];

                }

                if(!empty($document["description"])){

                    $insert_data["description"] = $document["description"];

                }

                if(!empty($document["document_id"])){

                    $document_id = $document["document_id"];

                    $document = Document::find($document_id)->update($insert_data);

                }

                else{

                    $document = Document::create($insert_data);

                }

            }

        }

        $message = '';

        if(!empty($document->id)){

            $message = 'Documents data has been uploaded successfully';

        }

        return $response

        ->setNextUrl(url()->previous())

        ->setMessage(__($message));

    }