Here is an updated issue related to my previous question.
I currently have a flawless code (DEMO) that works perfectly in Chrome and Firefox. However, it does not function properly in Internet Explorer. This is because IE does not support the use of display: none/block for option tags.
To explain how the functionality should work:
- The Main Tag and Sub Tag are two separate sections with identical list values
- An item should not be present in both sections at the same time. When a user selects "Item 1" from the Main Tag, it should be removed from the Sub Tag list.
- The Sub Tag has a section called "Selected Sub Tags," where selected sub tags are displayed as tags. If these selected tags are deleted, they should appear again in the Sub Tag list.
- If a user selects a different item (for example, "Item 2") in the Main Tag list, it should toggle between removing and adding items in the Sub Tag list. This means removing the currently selected item ("Item 2") and adding back the previously removed item ("Item 1") to the Sub Tag list. If Item 2 is already selected in the Selected Sub Tags list, it should also be removed from that list.
My main objective is to make the existing code work in Internet Explorer.
Alternatively, is there a way to achieve the same functionality using ul li instead of list items?