JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress"><div id="bar"></div></div>
<input type="button" value="next" id="nextButton"/>

CSS

#progress{
    height:20px;
    border:solid 1px #000;
}

#progress #bar{
    height:20px;
    width:0%;
    background:#f00;
}

JavaScript

var data = {
    "section": {
        "1": {
            "question": [{
                "id": "1a",
                "num": "1",
                "title": "test"
            }, {
                "id": "1b",
                "num": "2",
                "title": "test"
            }]
        },
        "2": {
            "question": [{
                "id": "2a",
                "num": "1",
                "title": "test"
            }, {
                "id": "2b",
                "num": "2",
                "title": "test"
            }]
        }
    }
}
    
var numQuestions = 0, number=0;
for (var sect in data.section){
    var questions = data.section[sect].question;
    for (var j = 0; j < questions.length; j++){
        numQuestions++;
    }
}
function updateProgress() {
    number++;
    var width = number / numQuestions * 100;
    $('#progress #bar').animate({'width':width + '%'});
}


$('#nextButton').click(function(){
    updateProgress();
});