order liste submission et ajout background color si select

reste à faire le remove de la class si non select

src/components/common/CollapseMenuOneSelect.vue

@@ -2,8 +2,8 @@
   <div
     v-if="!option.children.length"
     :id="option.id"
-    @click="select(option, option.i18n[locale] || option.naturalKey)"
     style="padding: 5px 16px"
+    @click="select(option, option.i18n[locale] || option.naturalKey, option.id)"
   >
     <a>{{ option.i18n[locale] || option.naturalKey }}</a>
   </div>
@@ -24,6 +24,7 @@
           v-for="child in option.children"
           :key="child.id"
           :option="child"
+          :id-reference-scope="idReferenceScope"
           @select-menu-item="select"
         >
         </CollapseMenuOneSelect>
@@ -43,17 +44,34 @@ export default {
       type: Object,
       required: true,
     },
+    listSelect: Array,
+    idReferenceScope: String,
   },
-  emits: ["select-menu-item"],
+  emits: ["select-menu-item", "change-style-if-selected"],
   setup(props, { emit }) {
     const isOpen = ref(false);
     const locale = services.internationalisationService.getLocale();
     const displayText = computed(() => props.option.i18n[locale] || props.option.naturalKey);
 
-    function select(option, localName) {
+    function changeStyleIfSelected(localID) {
+      const localElement = document.getElementById(localID);
+      if (localElement) {
+        console.log("selected", localID, props.idReferenceScope);
+        Array.from(document.querySelectorAll("div.colorSelected"))
+          .filter(el => el.id && el.id.includes(props.idReferenceScope + "K") && !el.id.includes(localID))
+          .forEach((element) => {
+            element.classList.remove("colorSelected");
+          });
+        localElement.classList.add("colorSelected");
+      }
+    }
+
+    function select(option, localName, localID) {
+      changeStyleIfSelected(localID);
       option.localName = option.localName || localName;
       emit("select-menu-item", option || { ...this.option, localName });
     }
+
     return {
       select,
       isOpen,
@@ -69,6 +87,10 @@ a {
   color: black;
 }
 
+.colorSelected {
+  background-color: rgba(0, 100, 100, 0.4);
+}
+
 .card {
   box-shadow: none;