inputting time in seconds and coverting it into seconds,minutes,hours and then the clock should start from that time onwards

Question

it's the code i have scripted but the output i needed is

1. User will enter seconds in input tag (value should be in between 0 to 86400).
2. On submit seconds time should be converted in HH:ii:SS time format
3. It should also show whether time is AM/PM.
4. without using image/video to represent digital number only using html tag,js and css only.
5. Time should continue to iterate per second once submitted.(e.g 10:00:01 to 10:00:02 to 10:00:03 and so on).
6. Default value should be 00:00:00 AM

function Convert() {
  var sec = parseInt(document.getElementById("input").value);
  var seconds = sec % 60;
  var minutes = ((sec - seconds) / 60) % 60;
  var hours = Math.trunc(((sec - seconds) / 60) / 60);
  if (hours > 12) {
    document.getElementById("hr").innerHTML = `${hours-12}:`;
    document.getElementById("mn").innerHTML = `${minutes}:`;
    document.getElementById("ss").innerHTML = `${seconds}`;
    document.getElementById("ap").innerHTML = `PM`;
  } else {
    document.getElementById("hr").innerHTML = `${hours}:`;
    document.getElementById("mn").innerHTML = `${minutes}:`;
    document.getElementById("ss").innerHTML = `${seconds}`;
    document.getElementById("ap").innerHTML = `AM`;
  }
}

<div class="clock">
  <div id="hr">00:</div>
  <div id="mn">00:</div>
  <div id="ss">00</div>
  <div class="ampm">
    <div id="ap">AM</div>
  </div>
</div>

<div class="Input">
  <input type="number" min="0" max="" id="input" placeholder="Enter time in seconds">
</div>

<div id="Container">
  <button type="button" onclick="Convert()">Submit</button>
</div>