Dynamic sum with JavaScript in PHP in Laravel

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 class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">

        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="hidden"
                name="id_grade[]"
                id="id_grade"
                value="{{$userGrades->id_grade}}"
            >
            <input
                type="number"
                name="quiz[]"
                id="quiz"
                value="0"
                autocomplete="quiz"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="assignment[]"
                id="assignment"
                value="0"
                autocomplete="min_score"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="d_t[]"
                id="d_t"
                value="0"
                autocomplete="d_t"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="min_text[]"
                id="min_text"
                value="0"
                autocomplete="min_text"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="final_text[]"
                id="final_text"
                value="0"
                autocomplete="final_text"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <output
                type="number"
                name="total[]"
                id="result"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
            >
                0
            </output>
        </th>
    </tr>
@empty
    <tr colspan = "6" class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
        <td class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            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>

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