JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="startClick(1);levelClick(1);">Click here</button>
<p>Money: <span id="money">0</span></p>
<p>XP: <span id="xp">0</span></p>
<p>Level: <span id="level">0</span></p>

JavaScript

var money = 0;
var xp = 0;
var level = 0;

//This loads the data
if(localStorage.money) money = localStorage.getItem('money');
//This updates the data when you load the html
document.getElementById("money").innerHTML = money;

if(localStorage.xp) xp = localStorage.getItem('xp');
document.getElementById("xp").innerHTML = xp;

if(localStorage.level) level = localStorage.getItem('level');
document.getElementById("level").innerHTML = level;

//This will set the max level, you can change the max by change 30 to what you want.
if(level > 30){
    level = 30;
    document.getElementById("level").innerHTML = level;
}

//This is your leveling system, its combine to the button with startClick.
function levelClick(number){
if(xp >= 500){
    level = parseInt(level) + 1;
    document.getElementById("level").innerHTML = level;
    xp = parseInt(xp) - 500;
    document.getElementById("xp").innerHTML = xp;
    localStorage.setItem('level', level);
    }
}

function startClick(number){
    money = parseInt(money) + 50; //Want it to be random number to get
    xp = parseInt(xp) + 100;//Same here
    //This will update money,xp to your html
    document.getElementById("money").innerHTML = money;
    //This sets the data, so "getItem" can load it
	localStorage.setItem('money', money);
    document.getElementById("xp").innerHTML = xp;
    localStorage.setItem('xp', xp);

}