Индикатор выполнения при нажатии кнопок

Question

У меня есть форма, которую я создаю, и у меня будут некоторые разделы, которые будут появляться справа налево, поверх этого и закреплена полоса, которая должна увеличиваться в ширине каждый раз, когда я нажимаю на кнопку продолжитьперейти к следующему вопросу.таким образом, пользователь будет знать, что он прогрессирует.Я не могу заставить работать мой индикатор выполнения, вы можете помочь мне понять, почему?

HTML

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div> 

<div class="questionsContainer">

<div class="section one">
    <p class="sectionTitle">This is the First Question?</p>
    <div class="buttonContinue" id="section2">CONTINUE</div>
</div>

<div class="section two">
    <p class="sectionTitle">Aja! time for the Second one!!</p>
    <div class="buttonContinue" id="section3">CONTINUE</div>
</div>

<div class="section three">
    <p class="sectionTitle">Another Question? 3 so far?</p>
    <div class="buttonContinue" id="section4">CONTINUE</div>
</div>

</div>

CSS

body {
        margin: 0 auto;
        transition: all 0.2s ease;
    }

    .progress-container {
        width: 100%;
        height: 4px;
        background: transparent!important;
        position: fixed;
        top: 0;
        z-index: 99;
    }

    .progress-bar {
        height: 4px;
        background: #4ce4ff;
        width: 10%;
    }

    header {
        width: 100%;
        height: 150px;
        position: relative;
        background-color: fuchsia;
    }

    .questionsContainer {
        width: 100%;
        height: calc(100% - 200px);
        position: absolute;
        background-color: lime;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        background-color: black;
    }

    .section {
        background-color: purple;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .one {
        position: absolute;
        right: auto;
        transition: all 0.2s ease;
    }

    .two {
        position: absolute;
        right: -100%;
        transition: all 0.2s ease;
    }

    .three {
        position: absolute;
        right: -100%;
        transition: all 0.2s ease;
    }

    .sectionTitle {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 30px;
        margin: 0 auto;
    }

    .buttonContinue {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 16px;
        padding: 10px 20px;
        background-color: red;
        border-radius: 5px;
        margin: 20px 0px;
        text-align: center;
        cursor: pointer;
        width: 100px;
    }

JAVASCRIPT

<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}   

document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>

<script type="text/javascript">

$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});

function addVisit(){
     var progressTag = $('#myBar');
     count ++;
     progressTag.css('width', count * 10 + "%");
});

</script>

Answer 1

Ваша основная проблема в том, что переменная count не была создана и ей изначально присвоено значение.

Я немного оптимизировал ваш код, и вот как я это сделал:

var count = 1;
$(document).ready(function() {
  $("#section2, #section3, #section4").click(function() {
    $('#myBar').css('width', ++count * 10 + "%");
  });
});

Я также добавил transition: all 1s; для анимированного перехода CSS.

Вот ваш обновленный код в JSFiddle