Function does not update the clock, how to properly delegate an event, how to fix it (https://jsfiddle.net/aod16pvj/7/) I tried this way (https://jsfiddle.net/jde9vp0t/), but delegation is needed

const timeInner = document.querySelector('[data-clock="time"]')
let AAstr, YY, MM, DD, AA, hh, mm, ss

function updateClock(date) {
  AAstr = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
  YY = date.getFullYear().toString().slice(-2)
  MM = date.getMonth() + 1
  DD = date.getDate()
  AA = date.getDay()
  hh = date.getHours()
  mm = date.getMinutes()
  ss = date.getSeconds()
  if (MM < 10) MM = '0' + MM
  if (DD < 10) DD = '0' + DD
  if (hh < 10) hh = '0' + hh
  if (mm < 10) mm = '0' + mm
  if (ss < 10) ss = '0' + ss
}

function clock() {
  let date = new Date()
  let delay = 1000 - new Date().getMilliseconds()
  updateClock(date)
}
clock()

document.querySelector('.options__format').addEventListener('input', (e) => {
  const chk = e.target.checked
  const chkId = e.target.dataset.chkId
  const itmChk = document.querySelector(`[data-clock="${chkId}"]`)
  timeInner.innerHTML = `${hh} : ${mm}`
  itmChk.innerHTML = ``
  if (chk) {
    if (chkId == 'date') itmChk.innerHTML = `${YY} - ${MM} - ${DD}`
    if (chkId == 'seconds') itmChk.innerHTML = `\u00A0: ${ss}`
    if (chkId == 'day') itmChk.innerHTML = `\u00A0${AAstr[AA]}`
  }
})