When cloning an input, only one of the inputs works with an "oninput" function, while the other does not

I have an ol element with some li's. Inside each li is also an input with an oninput function. When the li is clicked on, it's cloned and added to a separate column. The cloning works fine, except for the inputs. Only one of the inputs seems to actually read any values once it's cloned (I assume it's the original).

Any help would be greatly appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let exerciseBuilder = document.getElementById("exercise-builder");
let exerciseList = document.getElementById("list-of-exercises");
let repsLabel = document.querySelectorAll(".reps-label");
let ETA = document.getElementById("ETA");
// $(".reps").hide();
$(repsLabel).hide();

// This is the function that clones and copies over the li Element. I assume the problem is somewhere in here. 
function addToBuilder(e) {
  let target = e.target;
  if (target.matches('li')) {
    exerciseBuilder.insertBefore(e.target, exerciseBuilder.firstChild);
    let clone = e.target.cloneNode(true)
    exerciseList.appendChild(clone)
    $(e.target.children).show();
  }
}

// This is the function simply removes the li Element from the right column. This seems to work OK.
function removeFromBuilder(e) {
  let target = e.target;
  if (target.matches('li')) {
    e.target.remove();
  }
}

// This is the oninput function that I have linked in the HTML of the very first input.
function estimatedTimeOfCompletion() {
  let repsValue = document.getElementById("back-squat-reps").value;
  console.log(repsValue);
}

exerciseList.addEventListener("click", function(e) {
  addToBuilder(e);
})

exerciseBuilder.addEventListener("click", function(e) {
  removeFromBuilder(e);
})

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Here is the start of the left column, where the input seems to work correctly. -->
<div id="list-of-exercises-container">
  <ol id="list-of-exercises">
    <li class="exercise" id="back-squat">Back Squat
      <!-- I have have the oninput function on one of the inputs at the moment for testing purposes, but the plan is to put on all. -->
      <input class="reps" type="text" id="back-squat-reps" oninput="estimatedTimeOfCompletion()"><label class="reps-label">Reps</label>
    </li>
    <li class="exercise" id="power-clean">Power Clean
      <input class="reps"><label class="reps-label">Reps</label>
    </li>

    <li class="exercise" id="bench-press">Bench Press
      <input class="reps"><label class="reps-label">Reps</label>
    </li>
    <li class="exercise" id="box-jump">Box Jump
      <input class="reps"><label class="reps-label">Reps</label>
    </li>
  </ol>
</div>
<!-- Here is the start of the right column. When the li is cloned over here, the input stops working. -->
<div id="exercise-builder">
  <ul>
  </ul>
  <p id="ETA">Estimated Time Of Completion: </p>
</div>

<!-- end snippet -->

This is by design per the MDN documentation. cloneNode() does not copy event handlers.

You'll have to add the event listener to each element created.

        let clone = e.target.cloneNode(true)
        clone.addEventListener("click", <function>);
        exerciseList.appendChild(clone)

You can pass the event object to the input event handler and read the value of the current <input> with e.target.value (alternatively, you could pass the element itself to the function with this). However, you should consider using addEventListener instead of inline event handlers.

<input class="reps" type="text" oninput="estimatedTimeOfCompletion(event)">

function estimatedTimeOfCompletion(e) {
  let repsValue = e.target.value;
  console.log(repsValue);
}

It would be better to give the <input> a specific class and use event delegation. Note that cloning an element with the id attribute causes there to be duplicate ids in the document.