Need help with Making a realtime clock in the body (I was trying various ways and im stuck) so right now I have a headache and would appreciate any help lol

<!DOCTYPE html>

<html lang="en">

<head>

<title>CIS 223 Chapter 6 Program</title>

<script>
function realtimeclock() {
var rtClock = new Date();

`var hours = rtClock.getHours();`  
`var minutes = rtClock.getMinutes();`  
`var seconds = rtClock.getSeconds();`  

`var amPm = ( hours < 12 ) ? "AM" : "PM";`  

`hours = (hours > 12) ? hours - 12 : hours;`  

`hours = ("0" + hours).slice(-2);`  
`minutes = ("0" = minutes).slice(-2);`  
`seconds = ("0" = seconds).slice(-2);`  

`document.getElementById('clock').innerHTML =`  
    `hours + " : " + minutes + " : " + seconds + " " + amPm;`  
`var t = setTimeout(realtimeclock, 500);`  
`}`  

</script>

</head>

<body onload="realtimeclock()">

<h1>Running Clock: <span id="clock"></span></h1>

<br><br>

<h2>Please use the form below to add 3 items to the grocery list.</h2>

</body>

</html>