HTML Snippet - Section that occupies same space but appears based on what is pressed.

HTML Snippet - Section that occupies same space but appears based on what is pressed.

Hi, I am fairly new when it comes to working with HTML script. And I know javascript isn't something that works within a HTML Snippet (at least as far as my own experiences go anyway). Something that I need to script in, is a section that appears and disappears depending on what is pressed. Currently I am using a table to achieve this to some extent.

  1. <table>
  2.   <th>
  3.     <table>
  4.       <th>
  5.        <details>
  6.         <summary>
  7.           <span>
  8.           <i class="fa fa-bell></i>
  9.           </span>
  10.         </summary>
  11.         <center>
  12.           <table>
  13.             <tr>
  14.               <th>
  15.                 <div>
  16.                   <a href="#">
  17.                     <span> Report Button </span>
  18.                   </a>
  19.                 </div>
  20.               </th>
  21.             </tr>
  22.           </table>
  23.         </center>
  24.        </details>
  25.      </th>
  26.     </table>
  27.   </th>
  28. </table>
lines 14-20 are repeated after each other for however number of notification buttons we want.
Between the details here is what we set for the dropdown section. and summary is what stays visible, What
What we want is for this to is have a secondary button on the right side of the screen (the existing one is on the left) but this button show a different dropdown, but the dropdown section occupy the same space as the previous. So for example, if I click icon 1, the existing section shows, if I click icon 2 the new section shows. But always in the same spot. In the end the page will look something like this.

How would I go about getting the section to share a space with the other button.