Показывать кнопку только после клика на div

Question

Делаю тест (при помощи плагина), в котором вопросы подгружаются по очереди, без перезагрузки страницы. В каждом вопросе (<div class="step">, активный вопрос имеет дополнительный класс: class="step active-step") есть три ответа, на один из который кликает пользователь (<div class="ays-field ays_list_view_item">). Также в каждом вопросе есть кнопка "Далее" (это переход к следующему вопросу - <input type="button" class="ays_next action-button " value="Далее">. Как сделать так, что бы данная кнопка появлялась только после того, как пользователь нажмет на один из <div class="ays-field ays_list_view_item"> и снова исчезала, когда переходит на следующий вопрос? Ниже приведу часть кода.

<div class="step active-step">
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button " value="Далее">
    </div>
  </div>
</div>
<div class="step">
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button " value="Далее">
    </div>
  </div>
</div>
<div class="step">
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
      <div class="ays-field ays_list_view_item">
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button " value="Далее">
    </div>
  </div>
</div>

Answer 1

$('.step .ays_list_view_container div').on('click', function() {
  $(this).parent().find('.ays-field').removeClass("active_answer");
  $(this).addClass("active_answer");
  $(this).closest(".ays-abs-fs").find('.ays_next').removeClass("hide_button");
})

$('.step .ays-abs-fs .ays_next').on('click', function() {
  $($(this).closest(".quiz").find(".active-step").next()).addClass("active-step")
  $(this).closest(".step").removeClass("active-step");
})

.ays-field {
  border: 1px solid #000;
  display:flex;
  justify-content:center;
  padding: 1rem 0;
  width: 50%;
  margin-bottom:0.5rem;
}

.ays_next {
  width:50%;
 margin-bottom:0.5rem;
}

.step {
  display:none;
}

.active-step {
  display:block;
}

.hide_button {
  display:none;
}

.active_answer {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<sections class="quiz">
<div class="step active-step">
  <div>Шаг 1</div>
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
        Вопрос 1
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 2
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 3
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button hide_button " value="Далее">
    </div>
  </div>
</div>
<div class="step">
  <div>Шаг 2</div>
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
        Вопрос 1
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 2
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 3
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button hide_button " value="Далее">
    </div>
  </div>
</div>
<div class="step">
  <div>Шаг 3</div>
  <div class="ays-abs-fs">
    <div class="ays-quiz-answers ays_list_view_container">
      <div class="ays-field ays_list_view_item">
        Вопрос 1
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 2
      </div>
      <div class="ays-field ays_list_view_item">
        Вопрос 3
      </div>
    </div>
    <div class="ays_buttons_div">
      <input type="button" class="ays_next action-button hide_button " value="Далее">
    </div>
  </div>
</div>
  </sections>

БЛОГ НА HUSL

Показывать кнопку только после клика на div

Ответы (1 шт):