Creating health bar that increases in value based on users level

Question

Hello I am trying to create a healthbar that scales in max value based on the users level.

But I am kinda stuck with it because everytime the healthbar ends up in not having the right length based on the users level and it's health. The system works like this: the user starts at level 1 with a health value of 150 and increases + 10 everytime the user levels up, the max level that exists is 32.

Now I know this might be possible to do with a loop but I am not sure on how do this correctly:

This is the code for the health bar. The user_level is the users level and I am trying to change the element style based on his health, but at the same time that it would match with the current level of the user.

for (let i = 0; i < user_level.value; i++) {
playerhealthbar.style.width = user_health // Something here but I dont know how to.
}

This is the CSS code if it helps. What happens is that the greenbar should shrink so that the red bar underneath becomes visible.

#playerhealth {
position: absolute;
bottom: 0;
left: 0;
height: 45px;
width: 325px;
background: lightgreen;
}

#playerhealthbar {
position: absolute;
height: 50px;
width: 330px;
border: rgb(255, 255, 255) 3px solid;
border-radius: 3px;
margin-right: 20px;
display: inline-block;
margin-top: 442px;
margin-left: 70px;
background: rgb(158, 31, 31);
}


#playerhealthvalue{
position: absolute;
margin-top: 500px;
margin-left: 220px;
font-size: 30px;
color: black;
}