So, I have created a clickable div by putting onclick=" " attribute of HTML, it allows me to show my custom modal, now on my custom modal I have created another div with onclick, both divs has the same function on it like onclick="open__instruments()".

to better understand the structure, i have attached a code:

 <div class="w-full h-10 flex gap-2 relative" onclick="open__instruments()" id="creates__area">
      <div class="w-full h-full shrink-0 rounded-lg text-green4 hover:text-blue-text bg-white shadow-shadow1 flex justify-center items-center gap-2 hover:bg-green2 select-none">
          <span class="material-symbols-rounded">add</span>
          <div class="w-fit h-fit font-semibold py-2.5 ">Create</div>
      </div>
      <div class="w-[11rem] p-1 bg-white shadow-xl h-fit absolute -right-[11.7rem] rounded-lg hidden" id="instruments">
         <div class="w-full h-10 text-gray-600 rounded-md left_flex pl-3 hover:bg-green2 hover:text-blue-text font-semibold cursor-pointer" onclick="open__instruments()">New Area</div>
         <div class="w-full h-10 text-gray-600 rounded-md left_flex pl-3 hover:bg-green2 hover:text-blue-text font-semibold cursor-pointer mt-1" onclick="open__instruments()">New Parameter</div>
         <div class="w-full h-10 text-gray-600 rounded-md left_flex pl-3 hover:bg-green2 hover:text-blue-text font-semibold cursor-pointer mt-1" onclick="open__instruments()">New Task</div>
      </div>
 </div>

and it looks like this:

when I click that it will show the modal I created:

Now when i click New Area or New Parameter or New Task in my modal, the modal won't close, but when i click the +create div/button it will hide the modal.

below is the javascript function of onclick="open__instruments()":

const open__instruments = ()=>{
    if(document.getElementById('instruments').classList.contains('hidden')){
        document.getElementById('instruments').classList.remove('hidden')
    }else{
        document.getElementById('instruments').classList.add('hidden')
    }
}

how am i able to hide the modal by clicking a menu/button/div in my modal? BTW, i have also created separate function for toggling the modal but it still doesn't work, also, there is no error in the console.