Progress bar progress with interaction

Question

I'm really into html and i'm experimenting with progress bars and watching a lot of tutorials. I've made a progress bar and i saw how to make it load from 0 to 100 with JavaScript. But i want to make the following thing. I have a page with a lot of tutorials in order for people to learn Chinese. After finishing every tutorial i want to make the progress bar to jump with let's say 5%. My idea is that at the end of the tutorial i can click "Next" and increment the progress bar with 5%. I know that i somehow need to make it interact with my onClick for the next tutorial, but i have no clue how to do that. Any ideas? That's my progress bar:

<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>

and my onClick is in a separate html file:

<div class="w3-display-bottommiddle">Page 1/8</div>
    <div class="downrightbtn">
      <button class="next" onclick="page2()">Next</button>
    </div>
  </div>

i saw from another stackoverflow topic the following answer, but i don't know how to use this:

$('.progress-bar').css('width', percentageCompleted + '%')

and here we have the onClick, but it loads the progress bar from 0 to 100. How is it possible to make it till 10% and afterwards when we are finished with the second tutorial to increment it to 20%?

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";

Answer 1

Just call the function with "start(10)" that loads from 10 to 100 if you want to start with 20 percent already load use "start(20)" the next video progress bar starts after the first progress bar is load? If that's the case you can call "start(20)" at the end of the function .