masalah function hitung jquery

<div style="overflow-y: scroll; width: 100%"><table id="example3" class="table table-bordered table-hover table-striped" style="width: 100%">

    <thead>
  <th>ID Menu</th>
  <th>Nama Menu</th>
  <th>Harga Satuan</th>
  <th>Kategori</th>
  <th>Jumlah Porsi</th>
  <th>Subtotal</th>
  <th>Aksi</th>

</thead>
<tbody>

     <?php  foreach ($data as $row => $r) {

     ?>


  <tr>
    <?php echo form_open_multipart('admin/apesan'); ?>

      <td><input type="text" name="id_menu" value="<?php echo $r->id_menu?>" readonly></td>
      <td><input type="text" name="nama_pesanan" value="<?php echo $r->nama_menu?>" readonly></td>
      <td><input type="text" id="harga_satuan" class="harga_satuan" name="harga_satuan" onkeyup="hitung()" value="<?php echo $r->harga; ?>" readonly></td>
      <td><?php echo $r->kategori; ?></td>
      <td><input type="number" name="jml_porsi" id="jml_porsi" class="jml_porsi" onkeyup="hitung()"></td>
      <td><input type="text" name="subtotal" id="subtotal" class="subtotal" readonly></td>
      <td><a href="<?php echo base_url('admin/apesan') ?>"><button type="submit">Masukkan</button></td></tr>
   <?php echo form_close();; ?>
 <?php } ?>




</tr></tbody></table><br/>
</div>
<script>
 function hitung() {
   var a = $(".harga_satuan").val();
   var b = $(".jml_porsi").val();
   c = a * b;
   $(".subtotal").val(c);
 }
function isNumberKey(evt){
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode > 31 && (charCode  < 48 || charCode  > 57))
    return false;
      return true;
</script>