How to create a dynamic, deadline timer like

For people who join my newsletter, I want to invite them to purchase my product at a special discount by sending them an email with a link to my product page. But they have a deadline of 4 days after they click that link. How do I make this a dynamic timer which adapts to different people joining my new letter at different times?

Example, for person A joining my email group, I sent the link on March 1 and his deadline is March 4. But person B joining the list on March 10, will be sent the same email with the same link (automated) but when he clicks it, his deadline is March 14.

I was given this HTML and CSS code, but it’s for a SPECIFIC DATE; it’s not dynamic. Thanks for helping.

HTML code-

<div class="countdown-wrap">



            <div id="clockdiv">



                <div>



                    <span class="days"></span>



                    <span class="time-label">DAYS</span>



                </div>



                <div>



                    <span class="hours"></span>



                    <span class="time-label">HOURS</span>



                </div>



                <div>



                    <span class="minutes"></span>



                    <span class="time-label">MINUTES</span>



                </div>



                <div>



                    <span class="seconds"></span>



                    <span class="time-label">SECS</span>



                </div>



            </div>



        </div>







        <script type="text/javascript">



var deadline = 'March 2 2019 12:41:39 GMT+0200';



function getTimeRemaining(endtime){



    var t = Date.parse(endtime) - Date.parse(new Date());



    console.log(t);



    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 initializeClock(id, endtime){



    var clock = document.getElementById(id);



    function updateClock(){



        var t = getTimeRemaining(endtime);



        var daysSpan = clock.querySelector('.days');



        var hoursSpan = clock.querySelector('.hours');



        var minutesSpan = clock.querySelector('.minutes');



        var secondsSpan = clock.querySelector('.seconds');



        daysSpan.innerHTML = t.days;



        hoursSpan.innerHTML = t.hours;



        minutesSpan.innerHTML = t.minutes;



        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);



        if(t.total<=0){



            // Redirect if the Countdown is Over



            window.location.href="https://www.google.com”;



        }



    }





    updateClock(); // run function once at first to avoid delay



    var timeinterval = setInterval(updateClock,1000);



}



initializeClock('clockdiv', deadline);



</script>

CSS code - 

countdown-wrap:before {



    content: "";



    width: 8px;



    height: 65px;



    background: #444;



    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);



    background-image: -moz-linear-gradient(top, #555, #444, #444, #555);



    background-image: -ms-linear-gradient(top, #555, #444, #444, #555);



    background-image: -o-linear-gradient(top, #555, #444, #444, #555);



    border: 1px solid #111;



    border-top-left-radius: 6px;



    border-bottom-left-radius: 6px;



    display: block;



    position: absolute;



    top: 50%;



    transform: translate(0,-50%);



    left: -10px;



}



.countdown-wrap {



    width: 100%;



    max-width: 465px;



    margin-left: auto;



    margin-right: auto;



    position: relative;



}



div#clockdiv {



    text-align: center;



    background: #222;



    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);



    background-image: -moz-linear-gradient(top, #222, #333, #333, #222);



    background-image: -ms-linear-gradient(top, #222, #333, #333, #222);



    background-image: -o-linear-gradient(top, #222, #333, #333, #222);



    border: 1px solid #111;



    border-radius: 5px;



    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);



    margin: auto;



    padding: 20px 0 5px;



}



.countdown-wrap:after {



    content: "";



    width: 8px;



    height: 65px;