Fetch data in a selected table row

Hello,

I'm trying to edit the data inside a table row. I'm using a contextmenu not a button, when I tried to click an item like edit/delete a modal will appear for the data to be edited. I successfully retrieve the data inside a table row the problem is that it will always fetch the last data in the row. I wanted to edit in a selected row. I tried the button it works but in the contextmenu, I can't edit a selected row.

Table:

Code:

<div class="container">
     <div class="row">
       <div class="col-md-12">
         <div class="table-responsive">
           <table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
             <thead>
               <tr>
                 <th>Code</th>
                 <th>General Description</th>
                 <th>Unit</th>
                 <th>Quantity</th>
                 <th>Estimated Budget</th>
                 <th>Mode of Procurement</th>
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
               <?php foreach($items as $item){?>
               <tr>
                 <td>
                   <?php echo $item->id;?>
                 </td>
                 <td>
                   <?php echo $item->description;?>
                 </td>
                 <td>
                   <?php echo $item->unit;?>
                 </td>
                 <td>
                   <?php echo $item->quantity;?>
                 </td>
                 <td>
                   <?php echo $item->budget;?>
                 </td>
                 <td>
                   <?php echo $item->mode;?>
                 </td>

                 <td>
                   <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                   <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
                 </td>
               </tr>
               <?php }?>

             </tbody>
             <tfoot>
               <td colspan="3"></td>
               <td>Total</td>
               <td></td>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

Contextmenu:

Code:

"edit": {
        name: "Edit",
        icon: "fa-pencil-square-o",
        callback: function(itemKey, options) {        
        $('#ppmpsupplies').on('click', 'tr', edit_item( <?php echo $item->id ?> ));                                
        return true;
        }
        },

Script:

Code:

     function edit_item(id) {
       save_method = 'update';
       $('#gcjform')[0].reset();
       $.ajax({
         url: "<?php echo base_url('ppmp/ajax_edit/')?>" + id,
         type: "GET",
         dataType: "JSON",
         success: function(data) {

           $('[name="id"]').val(data.id);
           $('[name="description"]').val(data.description);
           $('[name="unit"]').val(data.unit);
           $('[name="quantity"]').val(data.quantity);
           $('[name="budget"]').val(data.budget);
           $('[name="mode"]').val(data.mode);

           $('#gcjmodal').iziModal('open');
         },
         error: function(jqXHR, textStatus, errorThrown) {
           alert('Error get data from ajax');
         }
       });
     }

Controller:

Code:

public function ajax_edit($id)
{
$data = $this->ppmp_model->get_by_id($id);
echo json_encode($data);
}

Model:

Code:

public function get_by_id($id)
{
$this->db->from($this->table);
$this->db->where('id',$id);
$query = $this->db->get();

return $query->row();
}

Does anybody know how to fix my problem?

$('#ppmpsupplies').on('click', 'tr', edit_item( <?php echo $item->id ?> )); <- this is you problem

edit:
pls put the fullcode from you as attachment