first of all, sorry for my bad english; secondly, iam really new with javascript, like know the concept but not have the full grip of the syntax; thirdly, the real problem is, i have idea to make a table that fetch data from database, and in the last column is an action button to show the detail of the row that been clicked, generating from database with ajax.

this my php code:

<?php $i=0; 
while($data=$query->fetch_assoc()){
    $i++;
    echo "<tr>";
    echo "<form action='' method='POST' id='show".$i."' role='form'>";
    echo "<td>"."<button type='submit' id='numb".$i."' value=".$data['num'].">";
    echo "detail</button></td>";
    echo "</form>";
    echo "</tr>";
}?> 

and this is my script:

<script> 
$(document).ready(function() {
  var len = $('[id^=show]').length;
  for (var i = 1; i <= len; i++) {
    var nn = "#numb" + i;
    $("#show" + i).submit(function(e) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "test.php",
        data: {
          numb: $(nn).val()
        },
        dataType: "html",
        success: function(response) {
          $("#container").html(response);
        }
      });
    });
  };
});
</script>

what iam trying is make multiple form with id like show, and count it in javascript, and then make function based on the how many id show in the table. but this code doesn't work, every detail button i click only return one data from the last parameter in the table. not data from the according row