diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 9ccde753..761531fc 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -16,6 +16,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   disabledRule?: boolean;
+  id?: number;
 }>();
 
 const adrressStore = useAddressStore();
@@ -115,7 +116,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-address"
+          :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly || sameWithEmployer"
@@ -136,7 +137,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          id="select-province"
+          :id="`${id ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -163,8 +164,9 @@ watch(districtId, fetchSubDistrict);
           "
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
+
         <q-select
-          id="select-district"
+          :id="`${id ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -192,7 +194,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-sub-district"
+          :id="`${id ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -220,7 +222,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
-          for="input-zip-code"
+          :for="`${id ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :borderless="readonly"
@@ -235,7 +237,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-address-en"
+          :for="`${id ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           :outlined="readonly ? false : outlined"
@@ -256,7 +258,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          id="select-province-en"
+          :id="`${id ? `select-province-en-${id}` : 'select-province-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -284,7 +286,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-district-en"
+          :id="`${id ? `select-district-en-${id}` : 'select-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -312,7 +314,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          id="select-sub-district-en"
+          :id="`${id ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -341,7 +343,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-input
           hide-bottom-space
-          for="input-zip-code"
+          :for="`${id ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :borderless="readonly"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 8562b5c2..e640014e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1667,6 +1667,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -1944,6 +1945,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -2070,6 +2072,7 @@ watch(currentStatus, async () => {
         >
           <template #address>
             <FormAddress
+              :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -2241,6 +2244,7 @@ watch(currentStatus, async () => {
             >
               <template #address>
                 <FormAddress
+                  :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -2431,6 +2435,7 @@ watch(currentStatus, async () => {
             >
               <template #address>
                 <FormAddress
+                  :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]