title: Button content closes on click of next button
body: <p>I have two buttons which store tables, but I want the table to disappear on click of the second button and show the contents of the second button immediately after clicking it, rather than clicking it twice (first click hides the table from the previous button, next clicks opens table from the current button).I don't seem to know how to do that. </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>function myFunction2() {
    var x = document.getElementById("displaytable");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" id="Button1" value="Button1" onClick="myFunction2()" /&gt;
  &lt;div id="displaytable" style="display:none"&gt;
    &lt;table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3"&gt;
      &lt;tr align="center"&gt;
        &lt;td class="lbl"&gt;column1&lt;/td&gt;
        &lt;td class="lbl"&gt;column2&lt;/td&gt;
        &lt;td class="lbl"&gt;column3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center"&gt;1&lt;/td&gt;
        &lt;td align="center"&gt;2&lt;/td&gt;
        &lt;td align="center"&gt;33&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center"&gt;4&lt;/td&gt;
        &lt;td align="center"&gt;5&lt;/td&gt;
        &lt;td align="center"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;input type="button" id="Button2" value="Button1" onClick="myFunction2()" /&gt;
  &lt;div id="displaytable" style="display:none"&gt;
    &lt;table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3"&gt;
      &lt;tr align="center"&gt;
        &lt;td class="lbl"&gt;column1&lt;/td&gt;
        &lt;td class="lbl"&gt;column2&lt;/td&gt;
        &lt;td class="lbl"&gt;column3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center"&gt;36&lt;/td&gt;
        &lt;td align="center"&gt;45&lt;/td&gt;
        &lt;td align="center"&gt;33&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td align="center"&gt;4&lt;/td&gt;
        &lt;td align="center"&gt;5&lt;/td&gt;
        &lt;td align="center"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>