The button to update the 'hp' variable in my website works internally, but for some reason the javascript doesn't update the footer on first click

The variables are updated internally for every click of the button, as it should, but the footer only starts updating after the first click, and when I switch to the players page to place a "bounty", the first click ends up decreasing the footer value by 1 (which should be the tipping function) and only decreasing the hp value by 10 after the first click. What might be the cause of this?

app.py:

@app.route("/dealers", methods=["GET", "POST"])
@login_required
def dealers():
if request.method == "POST":
id = int(request.form['user_id'])
#initialize rows with user data
rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
# making sure user has enough hp
if rows[0]["hp"] < 1:
return jsonify({'success': False})
# minus users hp and add dealers hp
db.execute("UPDATE users SET hp = hp - 1, lucky = lucky + 1 WHERE id = ?", session["user_id"])
db.execute("UPDATE users SET hp = hp + 1 WHERE id = ?", id)
session["hp"] = rows[0]["hp"]
hp = session["hp"]
return jsonify({'success': True, 'hp': hp})
else:
return render_template("dealers.html")
@app.route("/players", methods=["GET", "POST"])
@login_required
def players():
if request.method == "POST":
id = int(request.form['user_id'])
#initialize rows with user data
rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
# minus users hp and add dealers hp
db.execute("UPDATE users SET hp = hp - 10, lucky = lucky + 10 WHERE id = ?", session["user_id"])
db.execute("UPDATE users SET bounty = bounty + 1 WHERE id = ?", id)
session["hp"] = rows[0]["hp"]
hp = session["hp"]
return jsonify({'success': True, 'hp': hp})
else:
players = db.execute("SELECT * FROM users ORDER BY hp")
# add OFFSET int for skipping first few users^
return render_template("players.html", players=players)

script.js:

function tip(user_id) {
$.ajax({
type: 'POST',
url: '/dealers',
data: {'user_id': user_id},
success: function(data) {
if (data.success) {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$("#dialog-message").text("You have successfully tipped");
setTimeout(function() {
$("#dialog-message").dialog("close");
}, 4000); // close dialog after 5 seconds
// update HP value in #value-container element
if (data.hp !== undefined) {
$('#value-container').text("HP: " + data.hp);
}
} 
});
}
function placeBounty(user_id) {
$.ajax({
type: 'POST',
url: '/players',
data: {'user_id': user_id},
success: function(data) {
if (data.success) {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$("#dialog-message").text("You have successfully placed a bounty!");
setTimeout(function() {
$("#dialog-message").dialog("close");
}, 4000); // close dialog after 5 seconds 
$('#value-container').html("HP: " + data.hp);
} 

layout.html:

//some code
<footer>
<div id="value-container"> HP: {{ session["hp"] }} </div>
</footer>

Update:
So apparently in my app.py file, I forgot to re-update rows with the user data AFTER updating the hp variable, which was why there is a delay when you first click the button.