title: How do I make an addEventListener to work once until I close a div?
body: <p>So. I have a button that changes the visibility to the div -> spotPopUp. 
  I made an eventlistener to simply change the visibility of the div (hidd to visible and so on)
  The problem?<br>
  How do I make the button be able to be pressed only once till the "Cancel" or "Submit" are pressed?
  When I apply the removeEventListener it isn't added back when calling the function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var spot = document.getElementById("spot");
  spot.addEventListener("click", spotClick);
  
  function spotClick() {
    spot.addEventListener("click", spotClick);
    let popUp = document.getElementById("spotPopUp");
    if (popUp.style.visibility == "visible") {
      popUp.style.visibility = "hidden";
    } else {
      popUp.style.visibility = "visible";
    }
    spot.removeEventListener("click", spotClick);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" value="ADD SPOT" id="spot" /&gt;
  &lt;div id="spotPopUp"&gt;
    &lt;h3&gt;Add a Marker&lt;/h3&gt;
    &lt;a onclick="spotClick()"&gt;&lt;p&gt;Cancel&lt;/p&gt;&lt;/a&gt;
    &lt;a onclick="saveMarker()"&gt;&lt;p&gt;Add Marker&lt;/p&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope that I can get myself understood sorry for my bad english in advance.</p>