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;
        };
      }
I would be very grateful for any pointers and advice, thanks
 
    