javascript with laravel blade template loop and sum

Question

i'm trying to do calculation with my table using java-script, but i don't know how to loop it with the rest of the id. right now i can only calculate single item how to make this multiple here is the result

as you can see only id 1 get the result while id 2 is null how can i make this work here is my java script

function calc(){     
         var n1 = parseFloat(document.getElementById('n1').value);
         var n2 = parseFloat(document.getElementById('n2').value);
         var oper = document.getElementById('result').value = n1*4+n2; 
}

  <table id="my-table" class="table table-hover table-bordered">
                <thead>
                    <tr >
                      <th class="text">NAME</th>
                      <th class="text">A/P</th>
                      <th class="text">H/W</th>
                      <th class="text">Result</th>
                    </tr>
                 </thead>
                 <tbody>
                 @foreach($scores as $index => $score) 
                 <tr> 
                 <td>{{$score->lead->student_name}} <input type="hidden" name="scores[{{$loop->index}}][id]" value="{{$score->id}}"></td> 
                 <td style="text-align:center"><input id="n1" type="text" name="scores[{{$loop->index}}][jan_ap]" value="{{$score->jan_ap}}" class="input" autocomplete="off"></td> 
                 <td style="text-align:center"><input id="n2" type="text" name="scores[{{$loop->index}}][jan_hm]" value="{{$score->jan_hm}}"  class="input" autocomplete="off"></td> 
                 <td style="text-align:center"><input id="result" type="text" name="scores[{{$loop->index}}][result]" value="{{$score->result}}"  class="input" autocomplete="off"></td> 
                 </tr> 
                 @endforeach
                </tbody>
                </table><div class="form-group ">
                <button onclick="calc(); " type="submit">Submit</button>
                </div> 

Answer 1

From chat discussion and your controller code it found that, you want to add row with some formula and save the result in results field in database. So here we come up with code

Controller save method

$scores = $request->input('scores');

foreach($scores as $row){ 
    $score = Score::find($row['id']); 
    $score->jan_ap = $row['jan_ap']; 
    $score->jan_hm = $row['jan_hm']; 
    $score->result = round($row['jan_ap'] * 0.5) + ($row['result'] * 0.5); 
    $score->save(); 
}

Note: Remove your result text input fro blade template because it is not used anymore.

Answer 2

I am answering this with some assumptions that I will make, since its not really clear from the question.

Assumption 1: You have this table rendered using blade that gets Data from somewhere:

<div id="myTabDiv">
<table name="mytab" id="mytab1">
<tr> 
  <td>col1 Val1 (has ID)</td>
  <td>col2 Val2 (has jan_ap)</td>
  <td>col3 Val3 (has jan_hm)</td>
  <td>col4 Val4 (has result)</td>
</tr>
<tr>
  <td>col1 Val1 (has ID)</td>
  <td>col2 Val2 (has jan_ap)</td>
  <td>col3 Val3 (has jan_hm)</td>
  <td>col4 Val4 (has result)</td>
</tr>

Assumption 2: Yo have populated col 1-3 with values but you have a magical button, that when clicked calculates col4. Said button uses a JS function.

function calc(){    
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  //iterate through rows
  //rows would be accessed using the "row" variable assigned in the for loop
 for (var j = 0, col; col = row.cells[j]; j++) {
   //iterate through columns
   //columns would be accessed using the "col" variable assigned in the for loop
   //here you can do things like saying sum col[1] + col[2] and then input result in col[3]
   }  
  }
}