title: When clicking span element, modal doesn't close
body: <p>I'm creating two modals. One for buying, and the other for selling. However, when I click on the span in the modal which is supposed to close it, the modal isn't closed. Here's the code:</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 buyModal = document.getElementById("buyModal");
  var sellModal = document.getElementById("sellModal");
  
  function buy() {
    buyModal.style.display = "block";
  }
  
  function sell() {
    sellModal.style.display = "block";
  }
  
  function close() {
    buyModal.style.display = "none";
    sellModal.style.display = "none";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buyButton" onclick="buy()"&gt;Buy a Currency Pair&lt;/button&gt;
  &lt;button id="sellButton" onclick="sell()"&gt;Sell a Currency Pair&lt;/button&gt;
  &lt;div id="buyModal" class="modal"&gt;
    &lt;div class="modal-content"&gt;
      &lt;button class="close" onclick="close()"&gt;&amp;times;&lt;/button&gt;
      &lt;p&gt;Buy&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="sellModal" class="modal"&gt;
    &lt;div class="modal-content"&gt;
      &lt;button class="close" onclick="close()"&gt;&amp;times;&lt;/button&gt;
      &lt;p&gt;Sell&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Does anybody know why it doesn't work?</p>