diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 3f5131199..41e6cb706 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -67,17 +67,17 @@
 
             <el-option-group
                 v-if="group"
-                v-for="(group_options, name) in sortOptions"
-                :key="name"
-                :label="name">
+                v-for="(group_options, group_index) in sortOptions"
+                :key="group_options.key"
+                :label="group_options.key">
                 <el-option
-                    v-for="(label, value) in group_options"
-                    :key="value"
-                    :disabled="disabledOptions.includes(value)"
-                    :label="label"
-                    :value="value">
-                    <span class="float-left">{{ label }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
+                    v-for="(option, option_index) in group_options.value"
+                    :key="option.option_index"
+                    :disabled="disabledOptions.includes(option.key)"
+                    :label="option.value"
+                    :value="option.key">
+                    <span class="float-left">{{ option.value }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -279,42 +279,107 @@ export default {
     },
 
     created() {
-        // Option set sort_option data
-        if (!Array.isArray(this.options)) {
-            for (const [key, value] of Object.entries(this.options)) {
-                this.sort_options.push({
-                    key: key,
-                    value: value
-                });
+        if (this.group) {
+            // Option set sort_option data
+            if (!Array.isArray(this.options)) {
+                for (const [index, options] of Object.entries(this.options)) {
+                    let values = [];
+
+                    for (const [key, value] of Object.entries(options)) {
+                        values.push({
+                            key: key,
+                            value: value
+                        });
+                    }
+
+                    this.sort_options.push({
+                        key: index,
+                        value: values
+                    });
+                }
+            } else {
+                this.options.forEach(function (option, index) {
+                    this.sort_options.push({
+                        index: index,
+                        key: option.id,
+                        value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
+                    });
+                }, this);
             }
         } else {
-            this.options.forEach(function (option, index) {
-                this.sort_options.push({
-                    index: index,
-                    key: option.id,
-                    value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
-                });
-            }, this);
+            // Option set sort_option data
+            if (!Array.isArray(this.options)) {
+                for (const [key, value] of Object.entries(this.options)) {
+                    this.sort_options.push({
+                        key: key,
+                        value: value
+                    });
+                }
+            } else {
+                this.options.forEach(function (option, index) {
+                    this.sort_options.push({
+                        index: index,
+                        key: option.id,
+                        value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
+                    });
+                }, this);
+            }
         }
     },
 
     computed: {
         sortOptions() {
-            this.sort_options.sort(function (a, b) {
-                var nameA = a.value.toUpperCase(); // ignore upper and lowercase
-                var nameB = b.value.toUpperCase(); // ignore upper and lowercase
+            if (this.group) {
+                this.sort_options.sort(function (a, b) {
+                    var nameA = a.key.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.key.toUpperCase(); // ignore upper and lowercase
 
-                if (nameA < nameB) {
-                    return -1;
+                    if (nameA < nameB) {
+                        return -1;
+                    }   
+
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+
+                    // names must be equal
+                    return 0;
+                });
+
+                for (const [index, options] of Object.entries(this.sort_options)) {
+                    options.value.sort(function (aa, bb) {
+                        var nameAA = aa.value.toUpperCase(); // ignore upper and lowercase
+                        var nameBB = bb.value.toUpperCase(); // ignore upper and lowercase
+
+                        if (nameAA < nameBB) {
+                            return -1;
+                        }
+
+                        if (nameAA > nameBB) {
+                            return 1;
+                        }
+
+                        // names must be equal
+                        return 0;
+                    });
                 }
+            } else {
+                this.sort_options.sort(function (a, b) {
+                    var nameA = a.value.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.value.toUpperCase(); // ignore upper and lowercase
 
-                if (nameA > nameB) {
-                    return 1;
-                }
+                    if (nameA < nameB) {
+                        return -1;
+                    }
 
-                // names must be equal
-                return 0;
-            });
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+
+                    // names must be equal
+                    return 0;
+                });
+            }
 
             return this.sort_options;
         },
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index 7ebaec37f..4316114ff 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -69,17 +69,17 @@
 
             <el-option-group
                 v-if="group"
-                v-for="(group_options, name) in sortOptions"
-                :key="name"
-                :label="name">
+                v-for="(group_options, group_index) in sortOptions"
+                :key="group_options.key"
+                :label="group_options.key">
                 <el-option
-                    v-for="(label, value) in group_options"
-                    :key="value"
-                    :disabled="disabledOptions.includes(value)"
-                    :label="label"
-                    :value="value">
-                    <span class="float-left">{{ label }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
+                    v-for="(option, option_index) in group_options.value"
+                    :key="option.option_index"
+                    :disabled="disabledOptions.includes(option.key)"
+                    :label="option.value"
+                    :value="option.key">
+                    <span class="float-left">{{ option.value }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -165,18 +165,17 @@
 
             <el-option-group
                 v-if="group"
-                v-for="(group_options, name) in sortOptions"
-                :key="name"
-                :label="name">
+                v-for="(group_options, group_index) in sortOptions"
+                :key="group_options.key"
+                :label="group_options.key">
                 <el-option
-                    v-for="(label, value) in group_options"
-                    :key="value"
-                    :disabled="disabledOptions.includes(value)"
-                    :label="label"
-                    :value="value">
-                    <span class="float-left">{{ label }}</span>
-                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
-                </el-option>
+                    v-for="(option, option_index) in group_options.value"
+                    :key="option.option_index"
+                    :disabled="disabledOptions.includes(option.key)"
+                    :label="option.value"
+                    :value="option.key">
+                    <span class="float-left">{{ option.value }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
             </el-option-group>
 
             <el-option class="el-select__footer" :disabled="true"  :value="add_new">
@@ -399,21 +398,57 @@ export default {
 
     computed: {
         sortOptions() {
-            this.sort_options.sort(function (a, b) {
-                var nameA = a.value.toUpperCase(); // ignore upper and lowercase
-                var nameB = b.value.toUpperCase(); // ignore upper and lowercase
+            if (this.group) {
+                this.sort_options.sort(function (a, b) {
+                    var nameA = a.key.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.key.toUpperCase(); // ignore upper and lowercase
 
-                if (nameA < nameB) {
-                    return -1;
+                    if (nameA < nameB) {
+                        return -1;
+                    }
+
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+
+                    // names must be equal
+                    return 0;
+                });
+
+                for (const [index, options] of Object.entries(this.sort_options)) {
+                    options.value.sort(function (aa, bb) {
+                        var nameAA = aa.value.toUpperCase(); // ignore upper and lowercase
+                        var nameBB = bb.value.toUpperCase(); // ignore upper and lowercase
+
+                        if (nameAA < nameBB) {
+                            return -1;
+                        }
+
+                        if (nameAA > nameBB) {
+                            return 1;
+                        }
+
+                        // names must be equal
+                        return 0;
+                    });
                 }
+            } else {
+                this.sort_options.sort(function (a, b) {
+                    var nameA = a.value.toUpperCase(); // ignore upper and lowercase
+                    var nameB = b.value.toUpperCase(); // ignore upper and lowercase
 
-                if (nameA > nameB) {
-                    return 1;
-                }
+                    if (nameA < nameB) {
+                        return -1;
+                    }
 
-                // names must be equal
-                return 0;
-            });
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+
+                    // names must be equal
+                    return 0;
+                });
+            }
 
             return this.sort_options;
         },
@@ -444,6 +479,34 @@ export default {
 
     methods: {
         setSortOptions() {
+        if (this.group) {
+            // Option set sort_option data
+            if (!Array.isArray(this.options)) {
+                for (const [index, options] of Object.entries(this.options)) {
+                    let values = [];
+
+                    for (const [key, value] of Object.entries(options)) {
+                        values.push({
+                            key: key,
+                            value: value
+                        });
+                    }
+
+                    this.sort_options.push({
+                        key: index,
+                        value: values
+                    });
+                }
+            } else {
+                this.options.forEach(function (option, index) {
+                    this.sort_options.push({
+                        index: index,
+                        key: option.id,
+                        value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
+                    });
+                }, this);
+            }
+        } else {
             // Option set sort_option data
             if (!Array.isArray(this.options)) {
                 for (const [key, value] of Object.entries(this.options)) {
@@ -461,6 +524,7 @@ export default {
                     });
                 }, this);
             }
+        }
         },
 
         change() {