+如何从html调用javascript函数并通过它传递参数并获取行的同一字段中的值

Question

我正在添加ca，part_a，part_b数字并直接在总字段中写入总数并通过javascript计算gpa。在我的第一行中，我通过javascript获得Total和GPA值，但在我的第二行和下一行中，我没有得到Total和GPA值，我该如何解决这个问题？

<tbody>
<?php $i=0;?>
<?php foreach($student_info_by_session as $student_info){?>
<tr>
    <td>
        <input type="text" class="span12 typeahead"  value="<?php echo $student_info->student_roll; ?>">
        <input type="hidden" class="span12 typeahead" name="data[<?php echo $i; ?>][student_id]"  value="<?php echo $student_info->student_id; ?>">
        <input type="hidden" class="span12 typeahead" name="data[<?php echo $i; ?>][subject_id]"  value="<?php echo 11; ?>">
    </td>
    <td>
        <input type="text" class="span12 typeahead" id="ca[]" name="data[<?php echo $i; ?>][ca]" onkeyup="copy_text();" >
    </td>
    <td>
        <input type="text" class="span12 typeahead" id="part_a[]" name="data[<?php echo $i; ?>][part_a]" onkeyup="copy_text();" >
    </td>
    <td>
        <input type="text" class="span12 typeahead" id="part_b[]" name="data[<?php echo $i; ?>][part_b]" onkeyup="copy_text();" >
    </td>

这是我的javascript部分。

<script>         
        function copy_text()
        {

                var total_mark=+document.getElementById('ca[]').value + +document.getElementById('part_a[]').value + +document.getElementById('part_b[]').value;
                document.getElementById('total[]').value=total_mark;

                if(total_mark>=80){
                    document.getElementById('grade[]').value=4.0;
                }
                else if(total_mark>=75){
                    document.getElementById('grade[]').value=3.75;
                }
                else if(total_mark>=70){
                    document.getElementById('grade[]').value=3.5;
                }
                else if(total_mark>=65){
                    document.getElementById('grade[]').value=3.25;
                }
                else if(total_mark>=60){
                    document.getElementById('grade[]').value=3.0;
                }
                else if(total_mark>=55){
                    document.getElementById('grade[]').value=2.75;
                }
                else if(total_mark>=50){
                    document.getElementById('grade[]').value=2.5;
                }
                else if(total_mark>=45){
                    document.getElementById('grade[]').value=2.25;
                }
                else if(total_mark>=40){
                    document.getElementById('grade[]').value=2.0;
                }
                else{
                    document.getElementById('grade[]').value=0.0;
                }

        }
</script>

javascript函数仅适用于第一行而不适用于下一行。

     <td>
            <input type="text" class="span12 typeahead"  id="total[]"  name="data[<?php echo $i; ?>][total]" >
        </td>
        <td>
            <input type="text" class="span12 typeahead" id="grade[]" name="data[<?php echo $i; ?>][grade]" >
        </td>
    </tr>
    <?php $i++;} ?>
    <tr class="form-actions">
        <button type="submit" class="btn btn-primary">Save changes</button>
        <button type="reset" class="btn">Cancel</button>
    </tr>
</tbody>