Close one pop-up, when opening another

Question

my popups work just fine, but they will all stay open when clicked, instead of only allowing for one popup at a time. I have found this question asked, but I think my very low-level knowledge of JS isn't allowing me to easily modify the answers given for someone else's code, into my own. Big time noob here

JS

`   function myFunction(event) {
      event.target.children[0].classList.toggle("show");
    }`

HTML

    <div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
  &nbsp; &nbsp; &nbsp;
  <div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>

Select 3 Text Here

CSS

 .page-writing.popup { height: 3em: width: 3em; position: relative; position: relative; display: inline-block; cursor: pointer; font-family:bookmania, serif; font-size: .8rem; color: black; -webkit-opacity: .6; -moz-opacity: .6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.page-writing.popuptext { visibility: hidden; height: 6em; width: 20em; color: purple; overflow: auto; text-align:left; border-radius: 1em; padding: 1em; position: absolute; z-index: 1; top: 85%; left: 0%; margin-top: .5em; }.page-writing.popup::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px: border-width 2px; border-style:none; border-color: transparent; }.page-writing.popup.show{ visibility: visible; -webkit-animation: easeIn 1.5s; animation: easeIn 1.5s; } @-webkit-keyframes easeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes easeIn { from {opacity: 0;} to {opacity:1;} }

Answer 1

Try the following approach:

var lastPopup;
function myFunction(event) {
  lastPopup && lastPopup.classList.remove("show");
  lastPopup = event.target.children[0];
  lastPopup.classList.toggle("show");
}