Как записать два значения на основе клика и установить новую функцию, чтобы воздействовать на него

Question

У меня есть функция, которая создает таймер, затем возвращает строковое значение в DOM и обновляет его в реальном времени (с точностью до миллисекунды) в браузере. Я хотел бы получить значение текущее время от этого объекта при каждом нажатии на ссылку, а затем установить функцию тайм-аута для обратного отсчета с этого времени, но эта функция будет относиться к любой ссылке нажата.

Как бы я go сделал это с кодом, который у меня есть ниже?

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>