Суммировать все входы одного класса при изменении - JavaScript

Question

У меня есть входы с class="amount". Количество входов динамически контролируется пользователем, но я сомневаюсь, что это важно. Затем у меня есть вход с id="total"

<form>
  <input class="amount">
  <input class="amount">
  <input class="amount">

  <input id="total">
</form>

. Я хотел бы суммировать значения во входных данных с помощью .amount и поместить эту сумму с #total. Я хотел бы, чтобы этот расчет происходил при изменении любого из входных значений ".amount". Я новичок в использовании JS, и я пытаюсь найти самый чистый способ решения этого варианта использования.

Спасибо!

Answer 1

ОБНОВЛЕННЫЙ ОТВЕТ: Вы можете проверить, запустив фрагмент здесь.

$('.amount').on("input", function() {
  let total = 0;
  $('.amount').each(function() {
    total += $(this).val()/1;
  })
  $('#total').val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input class="amount" placeholder="One"><br/>
  <input class="amount" placeholder="Two"><br/>
  <input class="amount" placeholder="Three"><br/>
  <input id="total" placeholder="Total" readonly>
</form>