保存字段值。不显示网格中的当前值

Question

在社区成员的帮助下，我制作了一个javascript代码，用于计算数组中的字段并在另一个字段中显示结果。它工作得很好。 我的问题是我必须在升级按钮上单击2X才能在网格上显示正确的结果。附图。我需要帮助来解决这个问题。谢谢大家。

function render_field( $field ) {
        ?>
<label for="total">Total:</label>
<input class="total" id="total" name="<?php echo esc_attr($field['name']) ?>">

<style>
.total { 
font-size:18px !important;
}
</style>

<script type="text/javascript">
let total = 0;
document.querySelectorAll('input[type="number"]').forEach(el=>total+=+el.value);
document.querySelector('#total').value = total;
console.log(total);
</script>
        <?php
    }
}
// create field
new acf_field_sum();