Currently, I am developing a simple application using web technologies like HTML, CSS, and jQuery Mobile.
This app enables me to create goals and save them to a listview using the <li> element. Every <li> representing a goal will have an associated div that displays a progress bar set at 0% completion.
For instance, if I add 10 goals, there will be 10 <li> elements showing each goal like "Walk the dog." To work on a specific goal, I can simply click or press (if using on a phone) the corresponding <li>. This action will lead me to the next screen featuring a slider where I can indicate how much of the goal is completed, choosing between 0%, 50%, or 100% with the slider.
In order to alter the style of the div for the current goal being worked on, allowing the display of a progress bar image reflecting the completion percentage (0%, 50%, or 100%), what is the simplest way to achieve this?