I have a problem with this code. I can make the browser remember the customer’s option for each button and each one has a very long code. Now I have this list when I press one. The drop-down menu appears from it, and the code works properly until when using local storage I tried everything, and now when opening a list and restarting Page loading The two lists are opened together and when one is closed they are closed together. I tried everything like doing a large loop and like putting more than one store together and tried Jeson I don’t know how to skip that

JS CODE

  // Child Elements In Menu Sidebar   let toggleChild = document.querySelectorAll('.show'), menuChild = document.querySelectorAll('.hideChild'), menuChilds = []; storeSubMenu = localStorage.getItem('subMenu',null); storeSubMenut = localStorage.getItem('subMenut',null); const enableSubMenu = elem => {     elem.nextElementSibling.classList.remove('hideChild');     elem.firstElementChild.classList.add('active');         localStorage.setItem('subMenu','enabled');     storeSubMenut = localStorage.getItem('subMenut','enabled');  }; const disableSubMenu = elem => {     elem.nextElementSibling.classList.add('hideChild');     elem.firstElementChild.classList.remove('active')          localStorage.setItem('subMenu',null); };     for(i = 0 ; i <= menuChilds.length +1 ; i++ ){     if (storeSubMenu == 'enabled') {         enableSubMenu(toggleChild[i]);     } else {         disableSubMenu(toggleChild[i]);     }    }     toggleChild.forEach((item , index)=> {     item.addEventListener('click', () => {     storeSubMenu = localStorage.getItem('subMenu');     nextElement  = item.nextElementSibling;     if (nextElement.classList.contains('hideChild')) {         enableSubMenu(item);         menuChilds.push(document.querySelectorAll('.hideChild').length);     } else {         disableSubMenu(item);         menuChilds.pop();     } })       }) 

That’s HTML CODE

<div data-sotre="in" class="sidebar">   <div class="content-area">     <div class="headOfside">       <h1 class="c-headOfside">لوحة التحكم</h1>     </div>     <div class="menu">       <ul class="linksmain">         <li><a href="#" class="show">             الصفحات             <i class="fas fa-arrow-circle-left"></i>           </a>           <ul class="min-ul-pages child-links hideChild">             <li>               <a href="?page=pages&mainpages=chiefeo">                 الرئيس التنفيذي               </a>             </li>             <li>               <a href="#">                 رعاية المؤسسات               </a>             </li>             <li>               <a href="#">                 طاقم الشركة               </a>             </li>           </ul>         </li>         <li><a href="#" class="show">             التحكم             <i class="fas fa-arrow-circle-left"></i>           </a>           <ul class="min-ul-management child-links hideChild">             <li>               <a href="#">                 تعديل طاقم الشركة               </a>              </li>             <li>               <a href="#">                 المستشفيات والمواعيد               </a></li>             <li>               <a href="#">                 تعديل المديرين               </a></li>                        </ul>         </li>         <li>           <ul class="colors-change">             <li  class="flatreddark" data-color="red"></li>             <li  class="purpledark" data-color="purple"></li>             <li  class="yellowlight" data-color="yellow"></li>             <li  class="deffault" data-color="deffault"></li>           </ul>         </li>       </ul>     </div>   </div> </div> 

Please I am not using Jquery, so if you have an answer, please avoid Jquery