how to get another value with ajax from foreach table - php

Question

I have table from foreach, in this table i create submit with ajax (id="detail"), but why when i submit i just get first row, when i click second row value, i get first row value not second row value ?
<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>SO No</th>
<th>Opname Date</th>
<th>Warehouse</th>
<th>Type</th>
<th>Approve</th>
<th>Close period</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<?php $no=1; foreach ($show as $key) { ?>
<tr>
<td><?php echo $no ?></td>
<td><input type="text" id="sono" value="<?php echo $key->sono ?>"></td>
<td><input type="text" id="opnamedate" value="<?php echo $key->opnamedate ?>"></td>
<td><input type="text" id="warehousecode" value="<?php echo $key->warehousecode ?>"></td>
<td><input type="text" id="stocktypeid" value="<?php echo $key->stocktypeid ?>"></td>
<td></td>
<td></td>
<td>Detail</td>
</tr>
<?php $no++;} ?>
</tbody>
</table>
</form>
<script type="text/javascript">
//Ajax Load data from ajax
$(document).on('click', '#detail', function(){
var sono = $('#sono').val();
var opnamedate = $('#opnamedate').val();
var wh = $('#warehousecode').val();
var stocktypeid = $('#stocktypeid').val();
alert(sono);
});

Answer 1

you have to make the id also dynamic and also the script sholud be dynamic.Hope you get it
id="detail1"
.on('click', '#detail1', function() ----for first
.on('click', '#detail2', function() ----for second and so on

Answer 2

<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>SO No</th>
<th>Opname Date</th>
<th>Warehouse</th>
<th>Type</th>
<th>Approve</th>
<th>Close period</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<?php $no=1; foreach ($show as $key) { ?>
<tr>
<td><?php echo $no ?></td>
<td><input type="text" id="sono<?php echo $no; ?>" value="<?php echo $key->sono ?>"></td>
<td><input type="text" id="opnamedate<?php echo $no; ?>" value="<?php echo $key->opnamedate ?>"></td>
<td><input type="text" id="warehousecode<?php echo $no; ?>" value="<?php echo $key->warehousecode ?>"></td>
<td><input type="text" id="stocktypeid<?php echo $no; ?>" value="<?php echo $key->stocktypeid ?>"></td>
<td></td>
<td></td>
<td>Detail</td>
</tr>
<?php $no++;} ?>
</tbody>
</table>
</form>
<script type="text/javascript"> //Ajax Load data from ajax
function getDetails(no){
var sono = $('#sono'+no).val();
var opnamedate = $('#opnamedate'+no).val();
var wh = $('#warehousecode'+no).val();
var stocktypeid = $('#stocktypeid'+no).val();
alert(sono);}
hope this will help

Answer 3

Can you try this ?
$('#detail').click(function(){
var sono = $(this).siblings('#sono').val();
var opnamedate = $(this).siblings('#opnamedate ').val();
var wh = $(this).siblings('#wh').val();
var stocktypeid = $(this).siblings('#stocktypeid ').val();
alert(sono);
});