Как реализовать проверку ввода нескольких нескольких инпутов?

Question

[Алексей Зорин]

Приветствую!

Только начинаю учить JS, придумал для себя такую задачу: страница с перечнем предложений, которые надо перевести на английский (параллельно учу англ. язык:). Получилось реализовать только для одного инпута. Подскажите, пожалуйста, как реализовать задумку, чтобы ввод/проверка работали во всех полях, а не только в первом (одном)?

<style>
  #body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #aeaeae;
    width: 100%;
    height: 100vh;
    margin: 0;
  }
  .main {
    background: #fff;
    width: 40%;
    padding: 40px;
  }
  input {
    padding: 8px;
    margin-right: 5px;
    margin-bottom: 20px;
  }
  .btn {
    padding: 8px;
  }
  .answer-item {
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
  }
  .main-header {
    text-align: center;
    margin-bottom: 40px;
  }
  .correctly {
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
  }
  summary {
    cursor: pointer;
    outline: none;
  }
</style>

<div class="main">
  <div class="main-header">
    <h1>Jawa Script? I can!</h1>
    <p class="subtitle">Переведите предложения на английский</p>
  </div>
  <div class="answer-item">
    <form action="" method="GET">
      <p class="answer">Я хочу стать программистом</p>
      <label for="sentence"></label>
      <input type="text" name='sentence' class="user-answer" value="">
      <button type="button" class="btn">Проверить</button>
    </form>
    <div class="correctly"></div>
    <details>
      <summary>Подсказка</summary>
      <p class="prompt">I want to be a programmer</p>
    </details>
  </div>
  <div class="answer-item">
    <form action="" method="GET">
      <p class="answer">Я буду программистом</p>
      <label for="sentence"></label>
      <span class="chek"><img src=""></span>
      <input type="text" name='sentence' class="user-answer" value="">
      <button type="button" class="btn">Проверить</button>
    </form>
    <div class="correctly"></div>
    <details>
      <summary>Подсказка</summary>
      <p class="prompt">I will be a programmer</p>
    </details>
  </div>
</div>

<script>
  const btn = document.querySelector('.btn');

btn.onclick = function () {
  let userAnswer = document.querySelector('.user-answer').value;
  let answer = document.querySelector('.prompt').textContent;
  let correctly = document.querySelector('.correctly');

  if (userAnswer === answer) {
    correctly.textContent = 'Правильно!';
    correctly.style.color = 'green';
  } else if (userAnswer == null || userAnswer == '') {
    correctly.textContent = 'Нет варианта?';
    correctly.style.color = 'brown';
  } else {
    correctly.textContent = 'Ответ неверный, попробуйте еще раз';
    correctly.style.color = 'red';
  }
}
</script>

Answer 1

[ildar-meyker]

https://codepen.io/ildar-meyker/pen/LYRwzpw

document.addEventListener('click', handleCheckBtnClick);

function handleCheckBtnClick() {
    if ( !event.target.classList.contains('btn') ) return;
    
    const $questionRoot = event.target.closest('.answer-item');
    const $feedbackBox = $questionRoot.querySelector('.correctly');
    const userAnswer = $questionRoot.querySelector('.user-answer').value;
    const answer = $questionRoot.querySelector('.prompt').textContent;
    
    if ( !userAnswer ) {
      answerPlease($feedbackBox);
    } else if (userAnswer === answer) {
      youAreRight($feedbackBox);
    } else {
      youAreMistaken($feedbackBox);
    }
  
}

function answerPlease($feedbackBox) {
  $feedbackBox.textContent = 'Нет варианта?';
  $feedbackBox.style.color = 'brown';
}

function youAreRight($feedbackBox) {
  $feedbackBox.textContent = 'Правильно!';
  $feedbackBox.style.color = 'green';
}

function youAreMistaken($feedbackBox) {
  $feedbackBox.textContent = 'Ответ неверный, попробуйте еще раз';
  $feedbackBox.style.color = 'red';
}