diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 93396b3..c00d55c 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -135,171 +135,118 @@ if (districtSelect && !villageSelect) {
 }
 
 if (villageSelect) {
-    let tomvillage = new TomSelect('#village_code', settings);
-    let tomdistrict = new TomSelect('#district_code', {
+    let tomvillage, tomdistrict, tomcities, tomprovince;
+
+    const resetFields = (fromLevel) => {
+        if (fromLevel <= 1) {
+            citySelect.value = "";
+            if (tomcities) tomcities.clear();
+        }
+        if (fromLevel <= 2) {
+            districtSelect.value = "";
+            if (tomdistrict) tomdistrict.clear();
+        }
+        if (fromLevel <= 3) {
+            villageSelect.value = "";
+            if (tomvillage) tomvillage.clear();
+        }
+        if (postalCode) postalCode.value = "";
+    };
+
+    tomvillage = new TomSelect('#village_code', settings);
+
+    tomdistrict = new TomSelect('#district_code', {
         ...settings,
         onChange: function (value) {
-            // Destroy only if necessary (prevents unnecessary re-initialization)
-            if (tomvillage) {
-                tomvillage.destroy();
-            }
+            resetFields(3);
 
-            let url = 'locations/villages/district/' + value;
-            fetch(url)
-                .then(response => response.json())
-                .then(data => {
-                    const options = data.map(item => ({
-                        value: item.code,
-                        text: item.name
-                    }));
+            if (value) {
+                let url = 'locations/villages/district/' + value;
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        const options = data.map(item => ({
+                            value: item.code,
+                            text: item.name
+                        }));
 
-                    tomvillage = new TomSelect('#village_code', {
-                        ...settings, // Spread existing settings (including createOnBlur: false)
-                        options: options
+                        tomvillage.clear();
+                        tomvillage.clearOptions();
+                        tomvillage.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
                     });
-                })
-                .catch(error => {
-                    console.error('Error fetching data:', error);
-                });
+            }
         }
     });
 
-    let tomcities = new TomSelect('#city_code', {
+    tomcities = new TomSelect('#city_code', {
         ...settings,
         onChange: function (value) {
-            // Destroy only if necessary (prevents unnecessary re-initialization)
-            if (tomdistrict) {
-                tomdistrict.destroy();
-            }
+            resetFields(2);
 
-            let url = 'locations/districts/city/' + value;
-            fetch(url)
-                .then(response => response.json())
-                .then(data => {
-                    const options = data.map(item => ({
-                        value: item.code,
-                        text: item.name
-                    }));
+            if (value) {
+                let url = 'locations/districts/city/' + value;
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        const options = data.map(item => ({
+                            value: item.code,
+                            text: item.name
+                        }));
 
-                    tomdistrict = new TomSelect('#district_code', {
-                        ...settings, // Spread existing settings (including createOnBlur: false)
-                        options: options,
-                        onChange: function (value) {
-                            // Destroy only if necessary (prevents unnecessary re-initialization)
-                            if (tomvillage) {
-                                tomvillage.destroy();
-                            }
-
-                            let url = 'locations/villages/district/' + value;
-                            fetch(url)
-                                .then(response => response.json())
-                                .then(data => {
-                                    const options = data.map(item => ({
-                                        value: item.code,
-                                        text: item.name
-                                    }));
-
-                                    tomvillage = new TomSelect('#village_code', {
-                                        ...settings, // Spread existing settings (including createOnBlur: false)
-                                        options: options
-                                    });
-                                })
-                                .catch(error => {
-                                    console.error('Error fetching data:', error);
-                                });
-                        }
+                        tomdistrict.clear();
+                        tomdistrict.clearOptions();
+                        tomdistrict.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
                     });
-                })
-                .catch(error => {
-                    console.error('Error fetching data:', error);
-                });
+            }
         }
     });
 
-    let tomprovince = new TomSelect('#province_code', {
-        ...settings, // Spread existing settings
+    tomprovince = new TomSelect('#province_code', {
+        ...settings,
         onChange: function (value) {
-            console.log('Province selected:', value);
-            // Destroy only if necessary (prevents unnecessary re-initialization)
-            if (tomcities) {
-                tomcities.destroy();
-            }
+            resetFields(1);
 
-            let url = 'locations/cities/province/' + value;
-            fetch(url)
-                .then(response => response.json())
-                .then(data => {
-                    const options = data.map(item => ({
-                        value: item.code,
-                        text: item.name
-                    }));
+            if (value) {
+                let url = 'locations/cities/province/' + value;
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        const options = data.map(item => ({
+                            value: item.code,
+                            text: item.name
+                        }));
 
-                    tomcities = new TomSelect('#city_code', {
-                        ...settings, // Spread existing settings (including createOnBlur: false)
-                        options: options,
-                        onChange: function (value) {
-                            // Destroy only if necessary (prevents unnecessary re-initialization)
-                            if (tomdistrict) {
-                                tomdistrict.destroy();
-                            }
-
-                            let url = 'locations/districts/city/' + value;
-                            fetch(url)
-                                .then(response => response.json())
-                                .then(data => {
-                                    const options = data.map(item => ({
-                                        value: item.code,
-                                        text: item.name
-                                    }));
-
-                                    tomdistrict = new TomSelect('#district_code', {
-                                        ...settings, // Spread existing settings (including createOnBlur: false)
-                                        options: options,
-                                        onChange: function (value) {
-                                            // Destroy only if necessary (prevents unnecessary re-initialization)
-                                            if (tomvillage) {
-                                                tomvillage.destroy();
-                                            }
-
-                                            let url = 'locations/villages/district/' + value;
-                                            fetch(url)
-                                                .then(response => response.json())
-                                                .then(data => {
-                                                    const options = data.map(item => ({
-                                                        value: item.code,
-                                                        text: item.name
-                                                    }));
-
-                                                    tomvillage = new TomSelect('#village_code', {
-                                                        ...settings, // Spread existing settings (including createOnBlur: false)
-                                                        options: options
-                                                    });
-                                                })
-                                                .catch(error => {
-                                                    console.error('Error fetching data:', error);
-                                                });
-                                        }
-                                    });
-                                })
-                                .catch(error => {
-                                    console.error('Error fetching data:', error);
-                                });
-                        }
+                        tomcities.clear();
+                        tomcities.clearOptions();
+                        tomcities.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
                     });
-                })
-                .catch(error => {
-                    console.error('Error fetching data:', error);
-                });
+            }
         }
     });
 
     if (postalCode) {
         villageSelect.addEventListener('change', function (event) {
-            fetch('locations/villages/postal-code/' + event.target.value)
-                .then(response => response.json())
-                .then(data => {
-                    postalCode.value = data.postal_code;
-                })
+            if (event.target.value) {
+                fetch('locations/villages/postal-code/' + event.target.value)
+                    .then(response => response.json())
+                    .then(data => {
+                        postalCode.value = data.postal_code;
+                    })
+                    .catch(error => {
+                        console.error('Error fetching postal code:', error);
+                    });
+            } else {
+                postalCode.value = "";
+            }
         });
     }
 }