Dynamic Countdown Button before Download

Watch video tutorial on YouTube to understand clearly.

Code for download page

<center> 
     <!--Google Adsense Code-->
      <br>
    <center> 
      <style>#postTitle{text-align: center;}</style>  
        <button id="download-btn" onclick="generate()">
                  <i class="fa fa-download"></i> Download Now
              </button>
              <div id="refresh" style="display: none; font-size: 18px;"><b>Thanks!</b><br> Your download will start in few seconds... <br> If not then,</div>
              <a href="" id="re-download-btn" style="display: none;">Click Here</a>
              <script>
                  function generate() {
                      var j = document.getElementById("refresh");
                      var e, n = document.getElementById("re-download-btn"),
                          t = document.getElementById("download-btn"),
                          a = document.getElementById("re-download-btn").href,
                          l = 10,
                          d = document.createElement("span");
                      n.parentNode.replaceChild(d, n),
                          e = setInterval(function () {
                              --l < 0 ? (d.parentNode.replaceChild(n, d),
                                  clearInterval(e),
                                  window.location.replace(a),
                                  j.style.display = "contents",
                                  n.style.display = "inline") : (d.innerHTML = "<div class='waiting'>Please Wait...</div><div class='timer'>" + l.toString() + "</div> <div class='second'>Seconds</div>",
                                      t.style.display = "none")
                          }, 1e3)
                  }
              </script>
              <style>
                  button#download-btn {
                      padding: 10px 25px 10px 25px;
                      border: none;
                      border-radius: 5px;
                      color: white;
                      background: royalblue;
                      font-weight: 600;
                  }
                  button#download-btn:hover {
                      background: blue;
                  }
                  .timer {
                      background: #E0EBFD;
                      width: 5%;
                      padding: 15px;
                      font-size: 25px;
                      border-radius: 50%;
                      width: 7%;
                  }
              </style>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>  
          <script>
              document.getElementById("re-download-btn").href=localStorage.getItem("Download Link");
              document.getElementById("postTitle").innerHTML = localStorage.getItem("Post Title");
          </script>
      </center>
      <br><br>
    <!--Google Adsense Code-->
    </center>

Code for footer.php

<script>
        document.getElementById("post-Title").innerHTML = document.getElementById("postTitle").innerHTML;
        var postTitle = document.getElementById("postTitle").innerHTML;
        function redirectbtn(){
             localStorage.setItem("Post Title", postTitle)
             localStorage.setItem("Download Link",link);
             return false;
        }
    </script>

Code for every downloadable post

<center>
     <form action="/download-page/" target="_blank" style="margin-bottom: 15px;">
            <button style="color:white; background:green; border-radius:5px;" id="redirect-download" onclick="redirectbtn();"><i class="fa fa-download"></i>  Download Now</button>
     </form>
</center>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link> 

<script>
    // download link paste here
      var link = "https://demo.wwengineer.com";
</script>