Dynamic sum with JavaScript in PHP Laravel-CodePudding

I am trying dynamic sum with JavaScript in my Laravel application. It is working fine when there is one row. But if I make a for each loop, how can I get the sum for each row?

Here is my form:

@forelse($subject as $data)
    <tr >

        <th scope="row" >
<input
                            type="hidden"
                            name="id_grade[]"
                            id="id_grade"
                            value="{{$userGrades->id_grade}}"
                        >
            <input
                type="number"
                name="quiz[]"
                id="quiz"
                value="0"
                autocomplete="quiz"
                
                required
            >
        </th>
        <th scope="row" >
            <input
                type="number"
                name="assignment[]"
                id="assignment"
                value="0"
                autocomplete="min_score"
                
                required
            >
        </th>
        <th scope="row" >
            <input
                type="number"
                name="d_t[]"
                id="d_t"
                value="0"
                autocomplete="d_t"
                
                required
            >
        </th>
        <th scope="row" >
            <input
                type="number"
                name="min_text[]"
                id="min_text"
                value="0"
                autocomplete="min_text"
                
                required
            >
        </th>
        <th scope="row" >
            <input
                type="number"
                name="final_text[]"
                id="final_text"
                value="0"
                autocomplete="final_text"
                
                required
            >
        </th>
        <th scope="row" >
            <output
                type="number"
                name="total[]"
                id="result"
                
            >
                0
            </output>
        </th>
    </tr>
@empty
    <tr colspan = "6" >
        <td >
            No Data
        </td>
    </tr>
@endforelse

My JavaScript code is


<script>
        $('.form-group').on('input', '.prc', function(){
            let totalSum = 0;
            $('.form-group .prc').each(function(){
                const inputVal = $(this).val();
                if($.isNumeric(inputVal)){
                    totalSum  = parseFloat(inputVal);
                }
            });
            $('#result').text(totalSum / 5);
        });
    </script>

Screen Shot in website

I am getting the result in the first row only. How can I get values row by row?

CodePudding user response：

It looks like you have many form-group containers and you're trying to sum the inputs of the prc inputs across them all.

Try something like:

let accumulator = 0
let inputCount = 0

const formGroups = document.querySelectorAll('.form-group')

// for each 'form-group' element
formGroups.forEach(formGroup => {
  
  // get the values of all the 'prc' inputs and count how many there are
  formGroup.querySelectorAll('input.prc').forEach(input => {
    accumulator  = parseInt(input.value)
    inputCount  
  })

})

const total = accumulator
const average = total / inputCount

CodePudding user response：

@forelse($subject as $data)

    <th scope="row" >
        <input
            type="number"
            name="quiz[]"
            id="quiz"
            value="0"
            autocomplete="quiz"
            
            required
        >
    </th>
    <th scope="row" >
        <input
            type="number"
            name="assignment[]"
            id="assignment"
            value="0"
            autocomplete="min_score"
            
            required
        >
    </th>
    <th scope="row" >
        <input
            type="number"
            name="d_t[]"
            id="d_t"
            value="0"
            autocomplete="d_t"
            
            required
        >
    </th>
    <th scope="row" >
        <input
            type="number"
            name="min_text[]"
            id="min_text"
            value="0"
            autocomplete="min_text"
            
            required
        >
    </th>
    <th scope="row" >
        <input
            type="number"
            name="final_text[]"
            id="final_text"
            value="0"
            autocomplete="final_text"
            
            required
        >
    </th>
    <th scope="row" >
        <output
            type="number"
            name="total[]"
            id="result"
            
        >
            0
        </output>
    </th>
</tr>

@empty No Data @endforelse