title: How to change the style of a div and reset it after 1000ms?
body: <p>I have multiple (only 2 in this example) divs overlapping with each other...</p>
  <p>What I'd like to do is to add buttons that represents each div, which when clicked, should increase their respective div's z-index for 1000ms only, in order to stay on top of all the other overlapping divs. This is the only purpose of the increase in z-index.</p>
  <p>I was able to do some part of this, however, on second round of clicking, the secondary divs keep hiding behind the originally-on-top div.</p>
  <p>Please check and run the snippet below:</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 increaseDivOne() {
      const box = document.getElementById('Div1');
      box.style.zIndex = '999';
      setTimeout(function () {
          box.style.zIndex = '1';
      }, 1000);
  }
  function increaseDivTwo() {
      const box = document.getElementById('Div2');
      box.style.zIndex = '999';
      setTimeout(function () {
          box.style.zIndex = '1';
      }, 1000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Div1 {
    position: absolute;
    width: 300px;
    height: 150px;
    background-color: lightblue;
    border: 1px solid black;
  }
  
  #Div2 {
    position: relative;
    top: 130px;
    left: 30px;
    width: 300px;
    height: 150px;
    background-color: coral;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="increaseDivTwo()"&gt;Increase Div 2&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button onclick="increaseDivOne()"&gt;Increase Div 1&lt;/button&gt;
  
  &lt;ul&gt;Try this:&lt;/ul&gt;
  &lt;li&gt;Click "Increase Div 2"&lt;/li&gt;
  &lt;li&gt;Click "Increase Div 1"&lt;/li&gt;
  &lt;li&gt;Click "Increase Div 2" again and notice it will show up but will hide behind Div1 after 1s&lt;/li&gt;
  &lt;p&gt;My goal is to raise the z-index of a div for 1s, just enough to be on top of the other div and vice versa, but it should stay on top after the 1s set timeout. &lt;br&gt; Please note there's more Div in my actual project that will utilize this function.&lt;/p&gt;
  &lt;div id="Div2"&gt;
    &lt;h1&gt;Div 2&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="Div1"&gt;
      &lt;h1&gt;Div 1&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you in advance for any help.</p>