สอบถามวิธี หาผลรวมด้วย jquery โดยกล่อง Input ที่กรอกมีการวนซ้ำ ปัญหาคือ มัน รวมเฉพาะ row 1 ?

<?php
for($i=0;$i<3;$i++){
?>
<tr>
<td><input type="text" data-id="<?=$i?>" class="num1"></td>
<td><input type="text" data-id="<?=$i?>" class="num2"></td>
<td><input type="text" class="total"></td>
</tr>
<?php } ?>

var num1, num2
$(document).ready(function() {
   num1 = document.getElementsByClassName('num1');
   num2 = document.getElementsByClassName('num2');
   $('.num1, .num2').on('input',function() {
      var idx = parseInt($(this).data('id'));
      var vl1 = parseInt('0'+num1[idx].value.trim() );
      var vl2 = parseInt('0'+num2[idx].value.trim() );
      $('.total').val( (vl1 + vl2).toFixed(2));
   });
});

var x = parseInt( '65');
if( x<0 || x>70) alert('error');