After selection, show only selection

Hi,

I’m making an importance selection system and I’m trying to figure out something.
I have 6 icons and I want to select an icon and at that same moment the non selected icons should be removed and only show the selected icon.

I have a pen with the simple basic setup, but without anything that can make the changes because I have no idea how to approach this.

https://codepen.io/anon/pen/LoKgaZ

Any help or reference would be helpful

First you need to think about how you would “select” and icon and do anything. I don’t see any kind of dropdown or radio button group of the icons, you want a user to select, but if you are just wanting a user to click one of the icons you have in <td>, then my suggestion is to add a click event listener on the td element with class=“priority” (multiple ways of doing this) and then use querySelectorAll to select all of the anchor elements within the td element and iterate through the NodeList of the anchor elements and if the classList of an element does not match the classList of the “target” element (the one selected), then you could add a new class (see below), which would hide it.

.hidden {
  display: none;
}

You will need to research some of the ideas I have presented here, but this should get your started.