Реализация переключения по клику

var i = 0; 
var quizPanel = document.getElementsByClassName('quiz-panel'); 
var prev = document.getElementById('prev'); 
var next = document.getElementById('next'); 
var count = quizPanel.length-1; 
showButtons(prev,next,i,count); 
document.getElementById('next').onclick = function() { 
  document.getElementsByClassName("quiz-panel")[i].classList.remove("in-active"); 
  if(i == quizPanel.length) { 
    i = 0; 
  } else { 
    i++; 
  } 
  document.getElementsByClassName("quiz-panel")[i].classList.add("in-active"); 
  showButtons(prev,next,i,count); 
} 
document.getElementById('prev').onclick = function() { 
  document.getElementsByClassName("quiz-panel")[i].classList.remove("in-active"); 
  if(i == 0) { 
    i = 3; 
  } else { 
    i-- 
  } 
  document.getElementsByClassName("quiz-panel")[i].classList.add("in-active"); 
  showButtons(prev,next,i,count); 
} 
 
function showButtons(prev,next,step,count){ 
    if (step < 1){ 
  	prev.style.display='none'; 
    	next.style.display='block'; 
    } else if (step == count) { 
  	next.style.display='none'; 
    	prev.style.display='block'; 
    } else { 
  	prev.style.display='block'; 
    	next.style.display='block'; 
    }  
}

.quiz-selection, 
.quiz-selection-panel { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 
 
.quiz-panel { 
    display: none; 
} 
 
.in-active { 
    display: block; 
}

<div class="quiz-panel in-active"> 
  <div class="quiz-content"> 
    <h2>На какой праздник или кому выбираете шарики?</h2> 
    <ul class="quiz-selection"> 
      <li> 
        <input type="radio" name="holidays" id="happy-birthday" checked> 
        <label for="happy-birthday">День Рождение</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="family-celebration"> 
        <label for="family-celebration">Семейный праздник</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="new-year"> 
        <label for="new-year">Новый год</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="corporative"> 
        <label for="corporative">Корпоратив</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="outlet"> 
        <label for="outlet">Выпускной</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="another"> 
        <label for="another">Другой</label> 
      </li> 
      <li> 
        <input type="radio" name="holidays" id="for-myself"> 
        <label for="for-myself">Простотак, порадовать себя и близких</label> 
      </li> 
    </ul> 
  </div> 
  <div class="quiz-content-panel"> 
    <ul class="quiz-selection-panel"> 
      <li class="quiz-selection-item active"> 
        <span>1</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>2</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>3</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>4</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>5</span> 
      </li> 
    </ul> 
  </div> 
</div> 
<div class="quiz-panel"> 
  <div class="quiz-content"> 
    <h2>Какие шарики вам нравятся больше всего?</h2> 
    <ul class="quiz-selection"> 
      <li> 
        <input type="radio" name="like-ball" id="foil" checked> 
        <label for="foil">Фольгированные</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="conventional-gel"> 
        <label for="conventional-gel">Обычные гелевые</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="conventional-air"> 
        <label for="conventional-air">Обычные воздушные</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="with-a-pattern"> 
        <label for="with-a-pattern">С узором</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="hero"> 
        <label for="hero">В виде игрушки или персонажа</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="number"> 
        <label for="number">В виде цифр</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="another-ball"> 
        <label for="another-ball">Другой</label> 
      </li> 
      <li> 
        <input type="radio" name="like-ball" id="personal-ball"> 
        <label for="personal-ball">Есть фото того, что понравился</label> 
      </li> 
    </ul> 
  </div> 
  <div class="quiz-content-panel"> 
    <ul class="quiz-selection-panel"> 
      <li class="quiz-selection-item active"> 
        <span>1</span> 
      </li> 
      <li class="quiz-selection-item active"> 
        <span>2</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>3</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>4</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>5</span> 
      </li> 
    </ul> 
  </div> 
</div> 
<div class="quiz-panel"> 
  <div class="quiz-content"> 
    <h2>Подскажите ваш примерный бюджет?</h2> 
    <ul class="quiz-selection"> 
      <li> 
        <input type="radio" name="budget" id="little-many" checked> 
        <label for="little-many">10-30 бел.руб</label> 
      </li> 
      <li> 
        <input type="radio" name="budget" id="average-price"> 
        <label for="average-price">30-55 бел.руб</label> 
      </li> 
      <li> 
        <input type="radio" name="budget" id="great-price"> 
        <label for="great-price">55-100 бел.руб</label> 
      </li> 
      <li> 
        <input type="radio" name="budget" id="maximum-price"> 
        <label for="maximum-price">Более 100 бел.руб</label> 
      </li> 
      <li> 
        <input type="radio" name="budget" id="huge-budget"> 
        <label for="huge-budget">Бюджет не главное, важно чтобы понравилось</label> 
      </li> 
    </ul> 
  </div> 
  <div class="quiz-content-panel"> 
    <ul class="quiz-selection-panel"> 
      <li class="quiz-selection-item active"> 
        <span>1</span> 
      </li> 
      <li class="quiz-selection-item active"> 
        <span>2</span> 
      </li> 
      <li class="quiz-selection-item active"> 
        <span>3</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>4</span> 
      </li> 
      <li class="quiz-selection-item"> 
        <span>5</span> 
      </li> 
    </ul> 
     
  </div> 
</div> 
<button id="prev" type="button">Предыдущий вопрос</button> 
<button id="next" type="button">Следующий вопрос</button>