ES6 Push And Bind To An Array

Please pardon my newbie verbiage here while I attempt to explain my problem (also I did search and came up with nothing, I'd also like to use ES6, not jQuery) I'm trying to have a

Solution 1:

You can include <input type="button"> element as sibling of <input type="text"> element. At click on <input type="button"> .push() .value of <input type="text"> to array

<input type="text" 
       class="theplayer pre" 
       name="Player" 
       id="bind" 
       placeholder="Enter Names" />
<input type="button" value="click" />
<script>
  let namesOfPlayers = [];
  let input = document.getElementById("bind");
  let button = input.nextElementSibling;
  button.addEventListener("click", function() {
    namesOfPlayers.push(input.value);
    console.log(namesOfPlayers);
  });
</script>