title: Close popup when clicking a second time
body: <p>So I've created this table that opens a popup displaying information when you click a td. Each td displays different information in the popup.</p>
  <p>What's working:
  When I click on a td, it hides any open popup and opens the new popup corresponding to that td.</p>
  <p>What's not working:
  I want to make it so that when you a) click on the td whose popup is being displayed, it hides the popup (well, makes it display == none), b) click outside the table, hides any popup that is open.</p>
  <p>Here's my attempt at 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>window.onload = function() {
  
    $('#myTable').on('click', 'td', function() {
  
      $('.spanClass').html('');
      $('.spanClass').css("display", "none")
  
  
      var $tr = $(this).parent('tr');
      var firstCell = $tr.find("td:first").text();
      var didIt = (this.innerText - firstCell);
  
  
      //this is me attempting to close the popup if you click on the same td again, but open it if it's not currently open. 
      if ($(this).find(".spanClass").css("display") == 'block') {
        $(this).find(".spanClass").css("display", "none");
      } else {
        $(this).find('.spanClass').html(didIt);
        $(this).find(".spanClass").css("background-color", "#555");
        $(this).find(".spanClass").css("display", "block");
      }
      //this is me attempting to close the popup when I click outside the table.
      if (e.target.id != 'myTable') {
        $(".spanClass").css("display", "none");
      }
  
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="myTable"&gt;
    &lt;tr&gt;
      &lt;th&gt;Head Row&lt;/th&gt;
      &lt;th&gt;One&lt;/th&gt;
      &lt;th&gt;Two&lt;/th&gt;
      &lt;th&gt;Three&lt;/th&gt;
      &lt;th&gt;Four&lt;/th&gt;
      &lt;th&gt;Five&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Title 1&lt;/th&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;9&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;5&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;3&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;2&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;1&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Title 2&lt;/th&gt;
      &lt;td&gt;25&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;19&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;16&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;15&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;10&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;2&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Title 3&lt;/th&gt;
      &lt;td&gt;100&lt;/td&gt;
      &lt;td&gt;50&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;25&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;15&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;10&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;5&lt;span class="spanClass"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's my codepen:</p>
  <p><a href="https://codepen.io/jackcode1/pen/ZEpbRQq" rel="nofollow noreferrer">https://codepen.io/jackcode1/pen/ZEpbRQq</a></p>