nhance/app/Views/client_kyc.php

<div class="tab-pane fade" id="KYC-DOC-tab">
    <div class="row">
        <div class="col-12">
            <div class="card-body">
                <form role="form" class="parsley-examples" method="post" id="kyc_form" 
                    enctype="multipart/form-data">
                    <input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
                    <input type="hidden" name="PrimaryKey" id="kyc_PrimaryKey" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
                    <input type="hidden" name="client_id" id="client_id_kyc" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
                    <input type="hidden" name="entity_type" id="entity_type" />
                    <div class="form-group">

                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="emp_code">Document Type</label>
                                <select class="form-control" id="kyc_docs" name="kyc_doc_id" required>
                                    <option value="">Select Kyc Docs</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="kyc_docs">File</label>
                                <input class="form-control" type="file" name="file_name"
                                    multiple="true" id="kyc_docs_file" required>
                            </div>
                            <div class="form-group col-md-4 align-self-end">
                                    <button type="submit" class="btn btn-primary waves-effect waves-light mr-1"id="btnSubmit">Upload</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div> <!-- end col-->
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="kyc_table" class="table table-sm mb-0">
                        <thead>
                            <tr>
                                <th>Document Name</th>
                                <th>File Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->

            </div>
        </div> <!-- end card -->
    </div> <!-- end col -->
    <!-- end row -->
</div>
<!-- end -->

<script>

    var kycPrimaryKey  = $('#kyc_PrimaryKey').val();
    $(document).ready(function(){

       
        // $('#kyc_docs').change(function(){
        //     var selectedValue = $(this).val()
        //     console.log(selectedValue);
        // })


        
        if(kycPrimaryKey !== ''){
        var OptionsHTML3 =""
            $.ajax({
                url: '<?= base_url("client/kyc/list/"); ?>'+'<?= isset($client['entity_type_id']) ? $client['entity_type_id'] : '' ?>',
                type: "GET",
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(res) {
                    console.log(res);
                    $.each(res.data, function(index, item) {
                        OptionsHTML3 += '<option value="' + item.id + '">' + item.file_name + '</option>';                  
                    });
                    $('#kyc_docs').html(OptionsHTML3);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    console.error(status, error);
                }
            });


            var table = '';
            var data  = <?= isset($client_kyc) ? json_encode($client_kyc) : '[]' ?>;
            $('#tbody tr').remove();
            $.each(data, function(index, item) {
                table += `
                    <tr id="kyc-${item.id}">
                        <td>${item.client_file_name}</td>
                        <td>${item.file_name}</td>
                        <td><i data-id="${item.id}" class="mdi mdi-delete btnKycDelete"  style="font-size:18px;"></i></td>
                    </tr>
                `;   
            });
            $('#tbody').append(table);                     

        }

    })

    $("#kyc_form").submit(function(event) {
        event.preventDefault(); 
        
        // Perform validation
        var isValid = validateForm(); // Assuming you have a function for form validation
        var rowHtml = '';
        var form_action = '';
        if (isValid) {

            if(kycPrimaryKey === ''){
                form_action = '<?= base_url("client/kyc/create"); ?>';
            }else{
                form_action = '<?= base_url("client/kyc/edit"); ?>';
            }
            var formData = new FormData($('#kyc_form')[0]);

            $.ajax({
                data: formData,
                url: form_action,
                type: "POST",
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(res) {
                    console.log(res);
                    if(kycPrimaryKey === ''){
                        $.toast({
                            text: 'Client Relation Info',
                            heading: "Submitted Sucessfully", 
                            position: 'top-right',
                            icon: 'success', 
                        });
                    }else{
                        $.toast({
                            text: 'Client Relation Info',
                            heading: "Updated Sucessfully", 
                            position: 'top-right',
                            icon: 'success', 
                        });
                    }
                    $('#tbody tr').remove();
                    $.each(res.data, function(index, item) {
                        rowHtml += `
                            <tr id="kyc-${item.id}">
                                <td>${item.client_file_name}</td>
                                <td>${item.file_name}</td>
                                <td><i data-id="${item.id}" class="mdi mdi-delete btnKycDelete"  style="font-size:18px;"></i></td>
                            </tr>
                        `;                        
                    });
                    $('#tbody').append(rowHtml);
                    $('#kyc_docs_file').val('');
                    $('#kyc_docs').val('');
                    $('#kyc_docs').val('Select Document Type');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    console.error(status, error);
                }
            });

        }
    });

    $('body').on('click', '.btnKycDelete', function () {
        
        Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {

                var kyc_id = $(this).attr('data-id');
                $.get('<?php echo base_url('client/kyc/delete/');?>'+kyc_id, function (data) {
                    console.log('kyc-'+ kyc_id)
                    if(data){
                        $('#kyc-'+ kyc_id).remove();
                    }
                })
            }
        });
    });

     
    function validateForm() {
    var isValid = true;
    
    // Perform validation for each field
    $('#kyc_form input, #kyc_form select').each(function() {
        // Check for empty text inputs and selects
        if ($(this).is('input[type="text"]') || $(this).is('select')) {
            if ($.trim($(this).val()) == '') {
                alert('Please fill in all fields');
                isValid = false;
                return false; // Exit the loop early
            }
        }
        
        // Check for file inputs (assuming image files)
        if ($(this).is('input[type="file"]')) {
            var fileInput = $(this)[0];
            if (fileInput.files.length === 0) {
                console.log('Please select an image file');
                isValid = false;
                return false; // Exit the loop early
            }
        }
    });

    return isValid;
}

</script>