如何使用 javascript 在 foreach 中实时显示数组输入的总计

Question

I have this form which is in a foreach loop, to get the value of the amount input "qty[]" it should be multiply to "uprice[]". and the last input that is outside the foreach loop, it should display the total sum of all amount.

<tbody>
     <?php foreach($_POST['porder'] as $porder): ?>
    <tr>                    
        <td>
        <input type="text" id="itemnum[]" name="itemnum[]" 
            max=999 class="form-control form-control-line">
        </td>
        <td>
        <input type="text" id="code[]" name="code[]" class="form-control form-control-line" 
            value="<?php echo $porder ; ?>"readonly>
        </td>
        <td>
        <input style="text-transform:uppercase"  type="text" id="rev" 
            name="rev[]" class="form-control form-control-line" required>
        </td>
        <td>
        <input  style="text-transform:uppercase" type="text" id="desc" 
            name="desc[]" class="form-control form-control-line" required>
        </td>
        <td>
        <input type="tel" id="qty<?=$porder?>" name="qty[]" min="1" 
            class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
        </td>
        <td>
        <input type="tel" id="uprice<?=$porder?>" name="uprice[]" min="1" 
            class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
        </td>
        <td>

        <input type="number" id="amount<?=$porder?>" name="amount[]" 
            onkeyup="total()" class="form-control form-control-line" >
        </td>                                           
    </tr>
    <?php endforeach ?>                 
    <tr >
        <td colspan="5" ></td>  
        <td><strong>Total
        </td>
        <td>
        <input type="number" id="total" name="total"  class="form-control" >
        </td>
    </tr>

I tried to use a javascript to display the amount and the total. I only get the amount but not the total.

<script>

function compute(id) {
    var txtFirstNumberValue = document.getElementById('qty'+id).value;
    var txtSecondNumberValue = document.getElementById('uprice'+id).value;
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
    document.getElementById('amount'+id).value = result;
     }
}

</script>   


<script>
function total(){
    var amount = document.getElementsByName("amount[]");
    var total = 0;  

    for (var i = 0; i <amount.length; i++) {
    var input_value=amount[i];

        var signle_value_input = input_value.value;
        if(signle_value_input.length!=0)
        total +=parseInt(input_value.value);
    }
    if (!isNaN(total)) {
    document.getElementById('total').value = total;
     }
}

</script>

The Total doesn't show.

Answer 1

<script>

function total(){
 var total = 0;
var amount = document.getElementsByName('amount[]');
for (var i = 0; i <amount.length; i++) {
var inp=amount[i];
var signle_value_input = inp.value;
if(signle_value_input.length!=0)
total +=parseInt(inp.value)
}
if (!isNaN(total)) {
document.getElementById("total").value = total;
}
}


</script>