diff --git a/app/Http/Controllers/JenisLegalitasJaminanController.php b/app/Http/Controllers/JenisLegalitasJaminanController.php
index b087589..48ec006 100644
--- a/app/Http/Controllers/JenisLegalitasJaminanController.php
+++ b/app/Http/Controllers/JenisLegalitasJaminanController.php
@@ -150,4 +150,16 @@
         {
             return Excel::download(new JenisLegalitasJaminanExport, 'jenis_legalitas_jaminan.xlsx');
         }
+
+        public function getCustomFields($id)
+        {
+            $jenisLegalitasJaminan = JenisLegalitasJaminan::findOrFail($id);
+            if(!$jenisLegalitasJaminan->custom_fields) {
+                return response()->json([]);
+            }
+            
+            $customFields = CustomField::whereIn('id', $jenisLegalitasJaminan->custom_fields)->get();
+
+            return response()->json($customFields);
+        }
     }
diff --git a/resources/views/debitur/components/dokumen.blade.php b/resources/views/debitur/components/dokumen.blade.php
index 6f35db5..2debb71 100644
--- a/resources/views/debitur/components/dokumen.blade.php
+++ b/resources/views/debitur/components/dokumen.blade.php
@@ -395,7 +395,7 @@
                                     @endforeach
                                 </div>
                                 <div class="flex items-center justify-end gap-2 my-2 w-full">
-                                    <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{$n}},{{ $p_index-1 }})">Add File</button>
+                                    <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{$n}},{{ $detail->jenisLegalitasJaminan->id }})">Add File</button>
                                 </div>
                             @else
                                 <div class="flex flex-col w-full gap-2" id="document_container">
@@ -445,7 +445,7 @@
                                     @endif
                                 </div>
                                 <div class="flex items-center justify-end gap-2 my-2 w-full">
-                                    <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{ $n }})">Add File</button>
+                                    <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{ $n }},{{ $detail->jenisLegalitasJaminan->id }})">Add File</button>
                                 </div>
                                 @php $p_index++; @endphp
                             @endif
@@ -536,7 +536,7 @@
                             </div>
                         </div>
                         <div class="flex items-center justify-end gap-2 my-2 w-full">
-                            <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{ $n }})">Add File</button>
+                            <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput({{ $n }}, {{ $item->id }})">Add File</button>
                         </div>
 
                         <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -619,6 +619,42 @@
 
     {{--Legalitas Jaminan--}}
     <script>
+        function getCustomFields(jenisLegalitasJaminanId, index, newFieldIndex) {
+            return fetch(`/basic-data/jenis-jaminan/custom-fields/${jenisLegalitasJaminanId}`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-Requested-With": "XMLHttpRequest"
+                }
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(customFields => {
+                    let customFieldsHtml = '';
+                    customFields.forEach(field => {
+                        customFieldsHtml += `
+                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-2 custom-field">
+                    <label class="form-label max-w-56 capitalize">
+                        ${field.label}
+                    </label>
+                    <div class="flex flex-wrap items-baseline w-full">
+                        ${getCustomFieldInput(index, field.type, field.name, null, jenisLegalitasJaminanId, newFieldIndex)}
+                    </div>
+                </div>
+            `;
+                    });
+                    return customFieldsHtml;
+                })
+                .catch(error => {
+                    console.error("Error fetching custom fields:", error);
+                    return '';
+                });
+        }
+
         function getLegalitasJaminan() {
             var legalitasJaminan = document.getElementById("jenis_jaminan_id").value;
             var documentId = "{{ $document->id ?? "0" }}";
@@ -641,6 +677,7 @@
                     var doctainer = document.getElementById("doctainer");
                     doctainer.innerHTML = "";
                     data.forEach((item, index) => {
+                        console.log(item);
                         doctainer.innerHTML += `
                         <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                             <label class="form-label max-w-56 font-bold">
@@ -686,7 +723,7 @@
                             </div>
 
                                     <div class="flex items-center justify-end gap-2 my-2 w-full">
-                                        <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput(${index})">Add File</button>
+                                        <button type="button" class="flex-none btn btn-primary text-center" onclick="addFileInput(${index},${item.jenis_legalitas_jaminan_id})">Add File</button>
                                     </div>
                         </div>
 
@@ -704,16 +741,9 @@
                 .catch(error => console.error("Error:", error));
         }
 
-        function addFileInput(index, pindex = null) {
+        function addFileInput(index, jenisLegalitasJaminanId = null) {
             const documentContainer = document.getElementById(`document-container-${index}`);
-            let container = null;
-            const parentContainer = documentContainer.querySelector('#document_container');
-            if (pindex !== null) {
-
-                container = parentContainer.querySelector(`#document_container_${pindex}`);
-            } else {
-                container = documentContainer.querySelector('#document_container');
-            }
+            const container = documentContainer.querySelector('#document_container');
 
             const customFields = container.querySelectorAll('.custom-field');
 
@@ -725,34 +755,20 @@
             const newInput = document.createElement("div");
             newInput.className = "flex flex-col w-full gap-2 mb-4 custom-field-set";
 
-            let customFieldsHtml = '';
-            customFields.forEach(field => {
-                const label = field.querySelector('label').textContent;
-                const input = field.querySelector('input, textarea, select');
-                const fieldName = input.name.match(/\[([^\]]+)\]$/)[1];
-                customFieldsHtml += `
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                <label class="form-label max-w-56 capitalize">${label}</label>
-                <div class="flex flex-wrap items-baseline w-full">
-                    ${getCustomFieldInput(index, input.type, fieldName, null, null, newFieldIndex)}
+            getCustomFields(jenisLegalitasJaminanId, index, newFieldIndex).then(customFieldsHtml => {
+                newInput.innerHTML = `
+            <div class="flex flex-wrap items-baseline w-full">
+                <div class="flex items-center gap-2 w-full">
+                    <input class="flex-1 input" type="text" name="dokumen_nomor[${index}][]" placeholder="Nomor Dokumen">
+                    <input class="flex-1 file-input" type="file" name="dokumen_jaminan[${index}][]" accept=".pdf,image/*">
+                    <button type="button" class="flex-none btn btn-danger text-center" onclick="removeFileInput(this)">Remove</button>
                 </div>
             </div>
+            ${customFieldsHtml}
         `;
+
+                container.appendChild(newInput);
             });
-
-            newInput.innerHTML = `
-        <div class="flex flex-wrap items-baseline w-full">
-            <div class="flex items-center gap-2 w-full">
-                <input class="flex-1 input" type="text" name="dokumen_nomor[${index}][]" placeholder="Nomor Dokumen">
-                <input class="flex-1 file-input" type="file" name="dokumen_jaminan[${index}][]" accept=".pdf,image/*">
-                <button type="button" class="flex-none btn btn-danger text-center" onclick="removeFileInput(this)">Remove</button>
-            </div>
-        </div>
-        ${customFieldsHtml}
-
-    `;
-
-            parentContainer.appendChild(newInput);
         }
 
         function removeFileInput(button) {
diff --git a/routes/web.php b/routes/web.php
index 2a52e40..4565ada 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -82,6 +82,7 @@ Route::middleware(['auth'])->group(function () {
         Route::resource('jenis-legalitas-jaminan', JenisLegalitasJaminanController::class);
 
         Route::name('jenis-jaminan.')->prefix('jenis-jaminan')->group(function () {
+            Route::get('custom-fields/{id}', [JenisLegalitasJaminanController::class, 'getCustomFields'])->name('ustom-fields');
             Route::get('legalitas/{id}/{jenisJaminanId}', [DokumenJaminanController::class, 'getLegalitasJaminan'])
                  ->name('legalitas');
             Route::get('restore/{id}', [JenisJaminanController::class, 'restore'])->name('restore');