My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click.
HTML
<div id="myProgressbar" class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height: 10px;">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div class="btns">
<button type="button" name="sub" id="back" class="btn btn-default btn-lg" onclick="myFunctions()">back</button>
<button type="button" name="add" id="continue" class="btn btn-success btn-lg" onclick="myFunction()" >Continue</button>
</div>
...
Javascript
<script>
var num = 1;
document.getElementById("back").disabled = true;
document.getElementById("details").style.display="none";
document.getElementById("person").style.display="block";
document.getElementById("account").style.display="none";
document.getElementById("premium").style.display="none";
function myFunction() {
var listArry = document.getElementsByClassName('list');
for(var i = 0; i < listArry.length; i++){
listArry[i].style.color = "#CCC";
}
if (num==1){
...
num=2;
}
else if(num==2){
...
num=3;
}
else if(num==3){
...
}
}
</script>
...