Как реализовать вывод текста из button в input?

function foo() { 
  let btn = document.querySelectorAll('.choice-button'); 
  let input = document.querySelector('.people-input'); 
   
  // Развешиваем событие клика на кнопки 
  for(let i = 0; i < btn.length; i++) { 
    btn[i].addEventListener('click', function() { 
      // При клике на кнопку записываем ее значение в инпут 
      input.value = this.innerText; 
    }); 
  } 
 
} 
 
 
foo();

<div class="form-group people-block"> 
    <label class="form-people">People</label> 
    <form><input readonly type="text" name="people" class="people-input" id="people"></form> 
</div> 
<div class="people-choice"> 
<div class="people-choice-item"> 
    <button class="choice-button" onclick="return false">1-2 People</button> 
</div> 
<div class="people-choice-item"> 
    <button class="choice-button" onclick="return false">3 People</button> 
</div> 
<div class="people-choice-item"> 
    <button class="choice-button" onclick="return false">4 People</button> 
</div> 
</div>

$(".choice-button").click(function(){ 
   $("#people").val( $(this).text() ); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<label>People</label> 
<input readonly class="people-input" id="people"/> 
 
 
<button class="choice-button">1-2 People</button> 
<button class="choice-button">3 People</button> 
<button class="choice-button">4 People</button>