Javascript 进度条-带交互的进度

我真的很喜欢html，我正在试验进度条，并观看了很多教程。我制作了一个进度条，并了解了如何使用JavaScript将其从0加载到100。但我想做以下事情。为了让人们学习汉语，我有一个包含很多教程的页面。完成每一个教程后，我想让进度条跳跃，比如说5%。我的想法是，在教程结束时，我可以单击“下一步”，并将进度条增加5%。我知道在下一个教程中，我需要让它与onClick交互，但我不知道如何做到这一点。有什么想法吗？这是我的进度条：

<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>

这里有onClick，但它将进度条从0加载到100。当我们完成第二个教程将其增加到20%时，如何使其保持到10%以及之后

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";

---

只需调用“start（10）”函数，从10加载到100，如果您想从20%的已加载开始使用“start（20）”在加载第一个进度条后，下一个视频进度条开始？如果是这种情况，您可以在函数末尾调用“start（20）”

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

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";