How to create a customizable Countdown (Deadline) in JS that user can configure?

Question

I need to create a 'Deadline' option (countdown) using JS. I want the user to be able to configure it from the Date popup in html, and when the user refreshes the page the countdown is still working on the date the user has configured. I also need to make the user able to configure the event name that the deadline is happening for.

Note: I tried this $("#scheduleDate").datepicker().val(); but it is not working since it directly runs when the page loads, also it is not permanent (When reloads, its value goes). Here is my code:

//Get the date from user's input
function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

//the event_title
var title = getParameterByName('event_title');
document.getElementById("event_title").innerHTML = title;

//the countdown
var deadline = getParameterByName('deadline');

function time_remaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function run_clock(id, endtime) {
  var clock = document.getElementById(id);

  // get spans where our clock numbers are held
  var days_span = clock.querySelector('.days');
  var hours_span = clock.querySelector('.hours');
  var minutes_span = clock.querySelector('.minutes');
  var seconds_span = clock.querySelector('.seconds');

  function update_clock() {
    var t = time_remaining(endtime);

    // update the numbers in each part of the clock
    days_span.innerHTML = t.days;
    hours_span.innerHTML = ('0' + t.hours).slice(-2);
    minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
    seconds_span.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  update_clock();
  var timeinterval = setInterval(update_clock, 1000);
}
run_clock('clockdiv', deadline);

body {
  text-align: center;
  background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

.link {
  margin-top: 40px;
}

a {
  display: inline-block;
  color: #fff;
  font-size: 20px;
  padding: 20px;
  background: #265;
  border-radius: 10px;
  text-decoration: none;
}

a:hover {
  background: #487;
}

#clockdiv {
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv>div {
  padding: 10px;
  border-radius: 3px;
  background: #00BF96;
  display: inline-block;
}

#clockdiv div>span {
  padding: 15px;
  border-radius: 3px;
  background: #00816A;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<p id="demo88"> The Upcoming CTF</p>

<form method="GET">
  <input type="date" name="deadline" value="" />
  <input type="text" name="event_title" value="" placeholder="Enter Event Title" />
  <input type="submit" />
</form>


</div>
<div id="clockdiv">
  <div><span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div><span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div><span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div><span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>