How to save time value in dynamically created li to input box with javascript

How to save a time value in dynamically created li to input box with javascript
I have a simple timer, that starts, stops, pauses, takes a time snap and resets the time snap.
The timesnap in generated and displayed in the webpage inside a li. It all works fine what I am struggling with is trying to click on a displayed time snap and have the value placed in an input box so I can later save a selected value to a database.
This is the script I am using to place the clicked on li item into the input box

var items = document.querySelectorAll("#list li");
      for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          document.getElementById("inptSnap").value = this.innerHTML;
        };
      }

This is the html

<div class="container">
      <!--               Different App            -->

      <div class="timeDisplay">00:00:00</div>

      <button id="begin">Start</button>

      <button id="hold">Pause</button>

      <button id="end">Stop</button>

      <button id="timeSnap">Time Snap</button>
      <button id="resetSnap">Reset Time Snap</button>

      <ul id="list" class="laps"></ul>

      <div>
        <input type="text" id="inptSnap" />
      </div>
    </div>

This is the full timer script with the attempted select value onclick

var begin = document.getElementById("begin");
      begin.addEventListener("click", start);

      var end = document.getElementById("end");
      end.addEventListener("click", stop);

      var hold = document.getElementById("hold");
      hold.addEventListener("click", pause);

      var timeSnap = document.getElementById("timeSnap");
      timeSnap.addEventListener("click", snap);

      var timeSnap = document.getElementById("timeSnap");
      timeSnap.addEventListener("click", pause);

      var resetSnap = document.getElementById("resetSnap");
      resetSnap.addEventListener("click", resetSnaps);

      var ms = 0,
        s = 0,
        m = 0;
      var timeCounter;
      var displayEl = document.querySelector(".timeDisplay");
      var lapsContainer = document.querySelector(".laps");

      function start() {
        if (!timeCounter) {
          timeCounter = setInterval(run, 10);
        }
      }

      function run() {
        displayEl.textContent = displayTimeCount();

        ms++;
        if (ms == 100) {
          ms = 0;
          s++;
        }
        if (s == 60) {
          s = 0;
          m++;
        }
      }

      function stop() {
        stopTimer();
        ms = 0;
        s = 0;
        m = 0;
        displayEl.textContent = displayTimeCount();
      }
      function stopTimer() {
        clearInterval(timeCounter);
        timeCounter = false;
      }

      function pause() {
        stopTimer();
      }

      function displayTimeCount() {
        return (
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms)
        );
      }
      function snap() {
        if (timeCounter) {
          var li = document.createElement("li");
          li.innerText = displayTimeCount();
          lapsContainer.appendChild(li);
        }
      }

      function resetSnaps() {
        lapsContainer.innerHTML = "";
      }

      // Script to put lap into input box
      var items = document.querySelectorAll("#list li");
      for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          document.getElementById("inptSnap").value = this.innerHTML;
        };
      }

This is the CodePen Link

I would be very grateful for any pointers and advice, thanks

>Solution :

So I understand that you need a place value kind of thing.

 var begin = document.getElementById("begin");
      begin.addEventListener("click", start);

      var end = document.getElementById("end");
      end.addEventListener("click", stop);

      var hold = document.getElementById("hold");
      hold.addEventListener("click", pause);

      var timeSnap = document.getElementById("timeSnap");
      timeSnap.addEventListener("click", snap);

      var timeSnap = document.getElementById("timeSnap");
      timeSnap.addEventListener("click", pause);

      var resetSnap = document.getElementById("resetSnap");
      resetSnap.addEventListener("click", resetSnaps);

      var ms = 0,
        s = 0,
        m = 0;
      var timeCounter;
      var displayEl = document.querySelector(".timeDisplay");
      var lapsContainer = document.querySelector(".laps");

      function start() {
        if (!timeCounter) {
          timeCounter = setInterval(run, 10);
        }
      }

      function run() {
        displayEl.textContent = displayTimeCount();

        ms++;
        if (ms == 100) {
          ms = 0;
          s++;
        }
        if (s == 60) {
          s = 0;
          m++;
        }
      }

      function stop() {
        stopTimer();
        ms = 0;
        s = 0;
        m = 0;
        displayEl.textContent = displayTimeCount();
      }
      function stopTimer() {
        clearInterval(timeCounter);
        timeCounter = false;
      }

      function pause() {
        stopTimer();
      }

      function displayTimeCount() {
        return (
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms)
        );
      }
      function snap() {
        if (timeCounter) {
          var input = document.createElement("input");
          input.value = displayTimeCount();
          lapsContainer.appendChild(input);
        }
      }

      function resetSnaps() {
        lapsContainer.innerHTML = "";
      }

      // Script to put lap into input box
      var items = document.querySelectorAll("#list li");
      for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          document.getElementById("inptSnap").value = this.innerHTML;
        };
      }

 .timeDisplay {
        font-size: 32px;
      }
      ul li {
        list-style: none;
        font-size: 32px;
      }
      .container {
        width: 400px;
        margin: auto;
      }

<div class="container">
      <!--               Different App            -->

      <div class="timeDisplay">00:00:00</div>

      <button id="begin">Start</button>

      <button id="hold">Pause</button>

      <button id="end">Stop</button>

      <button id="timeSnap">Time Snap</button>
      <button id="resetSnap">Reset Time Snap</button>

      <ul id="list" class="laps">
        
      </ul>

      <div>
        <input type="text" id="inptSnap" />
      </div>
    </div>