How to log two values based on click and set a new function to act upon it

I have a function that creates a timer, then returns a string value to the DOM and updates it live (by millisecond) in the browser. I would like to get the the current time value from that object whenever a link is clicked, then set a timeout function to countdown from that time, but the function be relevant to whichever link is clicked.

How would I go about doing this with the code I have below?

let parentNode = document.querySelector('.time-options');
parentNode.addEventListener("click", logLinkId, false);

function logLinkId(e) {
        if (e.target !== e.target.id) { 
                let clickedHour = e.target.id;
                alert('timer is set for ' + `${clickedHour}!`);
        }
        e.stopPropagation();
}


function currentTime() {
        let date = new Date();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();
        let midday = "AM";
        midday = (hour >= 12) ? "PM" : "AM";
        hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);


        hour = updateTime(hour);
        min = updateTime(min);
        sec = updateTime(sec);
        document.getElementById("clock").textContent =
                `${hour} : ${min} : ${sec}`;
        var t = setTimeout(function () { currentTime() }, 1000);


        document.getElementById("clock").innerText = `${hour} : ${min} : ${sec} ${midday}`; /* adding time to the div */
        var t = setTimeout(currentTime, 1000); /* setting timer */
}

function updateTime(k) { /* appending 0 before time elements if less than 10 */
        if (k < 10) {
                return "0" + k;
        }
        else {
                return k;
        }
}
currentTime();

.time-options {
        border: 2px solid blue;
        padding: 0.15rem;

}
.time-options a {
        display: inline-flex;
        font-weight: normal;
        color: #e20000;
        display: inline-block;
}

.time-options span {
        cursor: default;
        pointer-events: none;
}

.time-options a:hover {
        color: blue;
}

/* dropdown menu */
.dropdown {
        margin: 10px 0;
        background: white;
        width: 200px;
        height: 30px;
        box-shadow: 6px 6px blue;

        line-height: 30px;
        user-select: none;
        display: inline-block;
        font-size: 1em;
        font-family: monospace;
        position: relative;
        left: 10px;
}

.dropdown:hover {
        cursor: pointer;
        background-color: #999;
}

.dropdown_value {
        display: inline-block;
        padding-left: 5px;
}

.dropdown_arrow {
        position: absolute;
        right: 5px;
        top: 0px;
}

.dropdown_panel {
        position: absolute;
        background: transparent;
        width: calc(100% + 10px);
        z-index: 99999;
        height: 200px;
        left: -1px;
        top: 28px;
        overflow: hidden;
        pointer-events: none;
}

.dropdown_items {
        position: absolute;
        pointer-events: all;
        top: 0px;
        width: calc(100% - 11px);
        max-height: 170px;
        background-color: white;
        box-shadow: 2px 2px 2px #999;
        overflow-y: auto;
        border: 1px solid #aaa;
        transform: translate(0px, -200px);
        transition: 0.3s all ease-out;
}

.dropdown_item {
        padding: 1px;
        font-size: 20px;
}

.dropdown_item:hover {
        background: #eee;
        cursor: pointer;
}

.dropdown ::-webkit-scrollbar {
        width: 10px;
}

.dropdown ::-webkit-scrollbar-thumb {
        background: blue;
}

            <div class="sub-title">
                        <div class="label-txt">currently:</div>
                        <span id="clock" class="digi"></span>
                </div>
  
  <div class="time-options">
                        <a href="#" id="hour">1 Hour</a> <span>⏰</span> <br />
                        <a href="#" id="later">Later Today</a> <span>🌞</span> <br />
                        <a href="#" id="evening">This Evening</a> <span>🌜</span><br />
                        <a href="#" id="tmrw">Sometime Tomorrow</a> <span>😴</span> <br />
                </div>
                <div id="dd1"></div>