diff --git a/resources/views/debitur/components/dokumen.blade.php b/resources/views/debitur/components/dokumen.blade.php
index 23acee9..be5c1c0 100644
--- a/resources/views/debitur/components/dokumen.blade.php
+++ b/resources/views/debitur/components/dokumen.blade.php
@@ -158,7 +158,14 @@
                         Dokumen Jaminan
                     </label>
                     <div class="flex flex-wrap items-baseline w-full">
-                        <input class="file-input" type="file" name="dokumen_jaminan[]" value="">
+                        <div class="flex flex-col w-full gap-2"  id="file-container-{{$n}}">
+                            <div class="flex items-center gap-2">
+                                <input class="file-input" type="file" name="dokumen_jaminan[{{ $n }}][]" multiple>
+                                <button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput({{ $n }})">Add More</button>
+                            </div>
+                            <div id="additional-files-{{ $n }}"></div>
+                        </div>
+
                         @if(isset($detail->dokumen_jaminan))
                             <a href="{{ route('debitur.jaminan.download',['id'=>$debitur->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
                                 <i class="ki-filled ki-cloud-download"></i></a>
@@ -444,7 +451,7 @@
     <script>
         function getLegalitasJaminan() {
             var legalitasJaminan = document.getElementById("jenis_jaminan_id").value;
-            var documentId = "{{ $document->id ?? "0" }}"; // Assuming you have access to the debitur ID in your Blade template
+            var documentId = "{{ $document->id ?? "0" }}";
             var debiturId = "{{ $debitur->id }}";
             var url = `/basic-data/jenis-jaminan/legalitas/${documentId}/${legalitasJaminan}`;
             fetch(url, {
@@ -465,63 +472,95 @@
                     doctainer.innerHTML = "";
                     data.forEach((item, index) => {
                         doctainer.innerHTML += `
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56 font-bold">
-                        ${index + 1}. ${item.name}
-                    </label>
-                    <input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
-                    ${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
-                </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56 font-bold">
+                                ${index + 1}. ${item.name}
+                            </label>
+                            <input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
+                            ${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
+                        </div>
 
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Nama Dokumen
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
-                    </div>
-                </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Nama Dokumen
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
+                            </div>
+                        </div>
 
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Dokumen Jaminan
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <input class="file-input" type="file" name="dokumen_jaminan[]" value="">
-                        ${item.dokumen_jaminan ? `
-                            <a href="/debitur/${debiturId}/jaminan/download?dokumen=${item.id}" class="badge badge-sm badge-outline mt-2">
-                                ${item.dokumen_jaminan.split('/').pop()}
-                                <i class="ki-filled ki-cloud-download"></i>
-                            </a>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Dokumen Jaminan
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full" id="file-container-${index}">
+                                ${item.dokumen_jaminan ? renderExistingFiles(item.dokumen_jaminan, debiturId, item.id) : ''}
+                                <div class="flex items-center gap-2 my-2 w-full">
+                                    <input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
+                                    <button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput(${index})">Add File</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        ${item.custom_field ? `
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56 capitalize">
+                                ${item.custom_field.replace(/_/g, " ")}
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                ${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
+                            </div>
+                        </div>
                         ` : ''}
-                    </div>
-                </div>
 
-                ${item.custom_field ? `
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56 capitalize">
-                        ${item.custom_field.replace(/_/g, " ")}
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        ${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
-                    </div>
-                </div>
-                ` : ''}
-
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Keterangan
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
-                    </div>
-                </div>
-            `;
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Keterangan
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
+                            </div>
+                        </div>
+                    `;
                     });
                 })
                 .catch(error => console.error('Error:', error));
         }
 
+        function addFileInput(index) {
+            const container = document.getElementById(`file-container-${index}`);
+            const newInput = document.createElement('div');
+            newInput.className = 'flex items-center gap-2 mb-2 w-full';
+            newInput.innerHTML = `
+                <input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
+                <button type="button" class="btn btn-danger w-[100px] text-center" onclick="removeFileInput(this)">Remove</button>
+            `;
+            container.appendChild(newInput);
+        }
+
+        function removeFileInput(button) {
+            button.closest('.flex.items-center.gap-2.mb-2').remove();
+        }
+
+        function renderExistingFiles(dokumenJaminan, debiturId, itemId) {
+            if (typeof dokumenJaminan === 'string') {
+                return `
+                    <a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}" class="badge badge-sm badge-outline mt-2">
+                        ${dokumenJaminan.split('/').pop()}
+                        <i class="ki-filled ki-cloud-download"></i>
+                    </a>
+                `;
+            } else if (Array.isArray(dokumenJaminan)) {
+                return dokumenJaminan.map(file => `
+                    <a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}&file=${file}" class="badge badge-sm badge-outline mt-2 mr-2">
+                        ${file.split('/').pop()}
+                        <i class="ki-filled ki-cloud-download"></i>
+                    </a>
+                `).join('');
+            }
+            return '';
+        }
+
         function getCustomFieldInput(type, fieldName, value) {
             value = value ? JSON.parse(value)[fieldName] || '' : '';
             switch (type) {