Есть тест из 5 вопросов, на экране виден только 1 вопрос.При выборе ответа и нажатии кнопки "далее" появляется следующий вопрос. Ползунок на прогресс-баре при ответе на 1 вопрос должен сдвигаться на 20% вправо. Не получается нормально реализовать эту функцию. Подскажите, как было бы правильнее это сделать?
<div class="question-select">
<div class="answer-number">
<span>Вопрос 2 из 5</span>
<h2>Сколько человек будет пользоваться канализацией?</h2>
</div>
<div class="answers" id="answers1">
<ul>
<li>от 1 до 4</li>
<li>от 5 до 7</li>
<li>от 7 до 10</li>
<li>от 10 до 15</li>
<li>от 15 до 20</li>
<li>от 20 и более</li>
</ul>
</div>
</div>
$('#answers1 li').click(function(){
$(".progress-line").animate({left: '+=20%'});
});