使用AJAX的codeigniter

can help me , my project use AJAX codeigniter, I have problem about jquery. My code :

 <?php foreach ($dt_pesanan_detail->result_array() as $key) {    ?>
 <tr class="content">
  <td class="td-keranjang">
  <select name="sum" id="sum">
  <?php
         echo "<option>".$key['jumlah']."</option>";
         for($k=0;$k<=10;$k++)
         {
                $q=array(
                   $k=>$k
                );
                echo "<option value='".$k."'>Kelas ".$k."</option>";
         }
 ?>
 </select>
 </tr>
 <td class="td-keranjang" id="sum_total">                             
  </td>
 <?php } ?>

my AJAX,but this code only for array index 1 , if result $dt_pesanan_detail more then 2 row, why j query only run in 1 row, 2 row can't run

<script type="text/javascript"> 
    $("#sum").change(function(){
            var sum = {sum:$("#sum").val()};
            $.ajax({
                    type: "POST",
                    url : "<?php echo base_url(); ?>transaksi/ambil_data_pelanggan_ajax",
                    data: sum,
                    success: function(msg){
                        $('#sum_total').html(msg);
                    }
                });
    });</script>

Change the id="sum" to class="sum" And in ajax call

 $(".sum").change(function(){
  var s = $(this).val();
     var sum = {sum:s};
   //stuff
});

Try use .sum class instead of id #sum, Since you have used mutiple select element, and *id is an unique parameter that is the reason you got the first row value *. Also, change the var sum = {sum:$(this).val()}; instead of var sum = {sum:$("#sum").val()};

   $(".sum").change(function(){
     $.ajax({
            type: "POST",
            url : "<?php echo base_url(); ?>transaksi/ambil_data_pelanggan_ajax",
            data: {sum:$(this).val()},
            success: function(msg){
                $('#sum_total').html(msg);
            }
        });
    });

HTML:

 <select name="sum" id="sum" class="sum">