无法使用js获取输入值

我有一个使用thymeleaf的循环输入,我需要在每次迭代悬停时获得值并计算和

 <tr th:each="person : ${persons}">
            <td th:text="${person.first_name}"></td>
            <td th:text="${person.last_name}"></td>
            <td th:text="${person.phone}"></td>
            <td><input id="age" class="form-control"
                        type="text" name="age" th:field="*{ages}">
            </td>
    </tr>

Total : <input type="text" name="sum" id="sum"/>

我的js脚本:

<script type="text/javascript">
    $(document).ready(function(){
          $("#age").each(function() {

            $(this).on('input', function(){
              calculateSum();
            });
            
            console.log("sum :"+sum);
          });

        });

        function calculateSum() {

          var sum = 0;
          $("#age").each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
              sum += parseFloat(this.value);
            }

          });
          $("#sum").html(sum.toFixed(2));

        }
    </script>

我的代码只给出了第一个值(就像它在第二次迭代中不起作用一样),我不知道为什么!!