<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <script type="text/javascript">
      let next = 0;

      function addMore() {
        let box = document.createElement('DIV');
        box.id = 'box' + next++;
        box.className = 'redbox';
        box.style.width = '150px';
        box.style.height = '150px';
        box.style.backgroundColor = 'red';
        box.style.border = '1px solid black';
        box.style.margin = '5px';
        window.setTimeout(function() {
          document.body.appendChild(box);
          }, 1000);
        }

        function reveal() {
          let elem = document.getElementById('revealed');
          window.setTimeout(function() {
            elem.style.display = '';
          }, 1000);
        }
      </script>
    </head>
    <body>
      <input id="adder" type="button" value="Add a box!" onclick="addMore()"/>

      <input id="reveal" type="button" value="Reveal a new input" onclick="reveal();" />

      <input id="revealed" style="display:none;" />
    </body>
  </html>
