Who do I get jquery to show the new value of a variable

Who do I get jquery to show the new value of a variable

Jquery noob here. I have a table in which each row has a View button. I store the variable that holds the record's id in a data-whatever tag
  1. <button><a id="buttone" type="submit" class="btn btn-small" data-whatever="<?php echo $eventID ;?>">View</a></button>
I have a div that i want to load details of the selected record for, beneath the table. When I click the button I pass the id to a php page that displays in the div on the same page. 

The problem is jquery is only storing the variabe for the first record in the table so i can only load the details of the first record no matter which one i click. I have searched but I am not exactly sure whats applicable in my case, below is what I have tried. Thanks for your help.

  2. $(document).ready(function(){
  3.     $('#form').submit(function(){
  4.   $('#insertResult').empty();

  6.   //var id = null;
  7.   //$ ("#buttone").removeAttr('data-whatever');
  8.   //$("#buttone").removeData('whatever');
  9.   //var id = $( "#buttone" ).attr('data-whatever');
  10.         //var id = $("#eventID").val();
  11.         var dataString = "id=" + id
  12.       
  13.   $.ajax({
  14.                 type: "GET",
  15.                 url: "readnote.php",
  16.                 data: dataString,
  17.                 cache: false,
  18.                 success: function (data) {
  19.                  
  20.                    $('#insertResult').html(data);
  21.                 },
  22.                 error: function(err) {
  23.                     console.log(err);
  24.                 }
  25.             });  
  26.            return false;  
  27.     });

  29. });