SQL lag with jquery variables

Question

I have this strange issue, which is hard for me to describe to be honest.

For testing purposes I have set up a SQL db containing id (autoincrement), first name, last name. I have 2 entries there.

I call the db and list the entries in inputs like this:

while($row = $result->fetch_assoc()) {
    $id = $row['id'];
    $fname = $row['fname'];
    $lname = $row['lname'];
    echo "<div id='$id'>
        <form method='post'>
          <p>ID: <input type='text' name='id' id='id".$id."' value='$id' /></p>
          <p>New first name: <input type='text' name='fname' id='fname".$id."' placeholder='$fname' /></p>
          <p>New last name: <input type='text' name='lname' id='lname".$id."' placeholder='$lname' /></p>
          <input type='submit' name='update' class='update' value='ID = $id' />
        </form>
      </div>";
    }

Works perfectly fine and I get a page with both entries and a button to update them.

I am updating them with this function

$('.update').click(function(){
      var row = $(this).parent().parent().attr('id'); // I've stored the SQL id in the parent div

      // construct the input ids so i know where I am getting the data from
      var idSource = '#id'+row;
      var fnameSource = '#fname'+row;
      var lnameSource = '#lname'+row;

      // store the input values in variables
      var id = $(idSource).val();
      var fname = $(fnameSource).val();
      var lname = $(lnameSource).val();

      // use ajax to update sql table    
      $.ajax({
        url     : 'aiai.php',
        method  : 'post',
        data    : {id: id, fname: fname, lname: lname},
        success: function(response){
          console.log(response);
        }
     });
    });

I am doing this so that every entry can be edited & updated on it's own. An while this basically working I am getting a strange lag.

Example:

• I load the page, update the first name, click the update button --> Works
• Then I edit the same entry again, click the update button --> i am getting the old value again
• When I refresh the page I get the name update I just saved
• Lag continues until I refresh the page

I load the page, update the first name, click the update button --> Works
Then I edit the same entry again, click the update button --> i am getting the old value again
When I refresh the page I get the name update I just saved.
Lag continues until I refresh the page.
It's like that info gets cached in the browser.

BUT, and this confuses me:
When I hardcode the inputs where I am calling the values from, everything works perfect.
So when I use

var id = $('#id2').val();

... instead of

var id = $(idSource).val();

... I am not experiencing this lag.

Anyone got an idea what I am doing wrong?