Can i fix the lag and the bug after pressing multiple button?

Sometimes the buttons will be unpressable after i pressing multiple buttons or it will lag, is there anything i can fix it?

e.g. After pressing left and up button, one of them will become unpressable (if i click it, it won’t do anything) or maybe also causes lag

<div class=”up”>
<input id=”up” type=”button” value=”Up” ontouchstart=”hold(‘up’)” ontouchend=”stop(‘up’)”
</div>
<div class=”down”>
<input id=”down” type=”button” value=”Down” ontouchstart=”hold(‘down’)” ontouchend=”stop(‘down’)”>
</div>
<div class=”left”>
<input id=”left” type=”button” value=”Left” ontouchstart=”hold(‘left’)” ontouchend=”stop(‘left’)””>
</div>
<div class=”right”>
<input id=”right” type=”button” value=”Right” ontouchstart=”hold(‘right’)” ontouchend=”stop(‘right’)””>
</div>

async function hold(direc) {

holdup = setInterval(function() {
this.change = time*0.0003
time++;
if(change > 0.007) {
change = 0.007;
}
if(direc == “up”) {
dy += change
}
if(direc == “down”) {
dy -= change
}
if(direc == “left”) {
dx -= change
}
if(direc == “right”) {
dx += change
}
}, 1);
}
async function stop() {
clearInterval(holdup)
time = 0;
}

function loop() {
player.style.right = (Number(player.style.right.split(“px”)[0]) – dx) + “px”;
player.style.top = (Number(player.style.top.split(“px”)[0]) – dy) + “px”;
dx *= 0.99;
dy *= 0.99;
if (player.style.right.split(“px”)[0] > 315) {
player.style.right = 315 + “px”;
}
if (player.style.right.split(“px”)[0] < -30) {
player.style.right = -30 + “px”;
}
if (player.style.top.split(“px”)[0] < 0) {
player.style.top = 0 + “px”;
}
if (player.style.top.split(“px”)[0] > 282) {
player.style.top = 282 + “px”;
}
/*console.log(`dx:${dx}`)
console.log(`dy:${dy}`);*/
//console.log(player.style.top)
}
dx = 0;
dy = 0;
var loop = setInterval(loop,0)
player.style.top = 135 + “px”;
player.style.right = 310 + “px”;

Here is the link of my project:
Press here