I have a web site that i want users to be able to add their hobbies and a percentage of time spent on each hobby, I want them to be styled and displayed in a bar that looks like "skill bars".

I have an input field in which the user is asked to write the percentage and another one for the name of the hobby,

should I use Javascript to add and display the added hobbies and also save them in the database so that when the user refreshes the page I fetch the data and display them?

Is my way correct or is there better ways to achieve that?