Как доработать функционал опросника (теста) на JS?

Всем привет, есть готовая структура

$(".js-tab-item").not(":first-child").hide();
$(".js-tab").click(function() {
  if (!$(this).hasClass('active')) {
    var tabsContainer = $(this).closest(".js-tabs"),
      tabs = tabsContainer.find(".js-tab"),
      tabsItems = tabsContainer.find(".js-tab-item");
    tabs.removeClass("active").eq($(this).index()).addClass("active");
    tabsItems.hide().eq($(this).index()).fadeIn(1)
  }
}).eq(0).addClass("active");
.tables__tabs {
  display: flex;
}

.tables__tab {
  margin: 0 20px;
  color: #ccc;
}

.tables__tab:first-of-type {
  margin-left: 0;
}

.tables__tab.active {
  color: #ff0000;
}

.result {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tables">
  <div class="tables__wrap js-tabs">
    <div class="tables__tabs">
      <div class="tables__tab js-tab active">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 1</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 2</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 3</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 4</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 5</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 6</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
      <div class="tables__tab js-tab">
        <div class="tab_item">
          <div class="tab_item__ico">
            <span></span>
          </div>
          <!-- /.tab_item__ico -->
          <div class="tab_item__txt">Вопрос 7</div>
          <!-- /.tab_item__txt -->
        </div>
        <!-- /.tab_item -->
      </div>
    </div>
    <div class="tables__items">
      <div class="tables__item js-tab-item">
        <div> <input type="radio" name="one" value="Да"> Да </div>
        <div><input type="radio" name="one" value="Нет"> Нет </div>
      </div>
      <div class="tables__item js-tab-item">
        <div><input type="checkbox" name="two" value="Свет"> Свет </div>
        <div> <input type="checkbox" name="three" value="Тьма"> Тьма</div>
      </div>
      <div class="tables__item js-tab-item">

        <div><input type="checkbox" name="two1" value="Свет1"> Свет1 </div>
        <div> <input type="checkbox" name="three1" value="Тьма1"> Тьма1</div>
      </div>
      <div class="tables__item js-tab-item">

        <div><input type="checkbox" name="two2" value="Свет2"> Свет2 </div>
        <div> <input type="checkbox" name="three2" value="Тьма2"> Тьма2</div>
      </div>
      <div class="tables__item js-tab-item">

        <div><input type="checkbox" name="two3" value="Свет3"> Свет3 </div>
        <div> <input type="checkbox" name="three3" value="Тьма3"> Тьма3</div>
      </div>
      <div class="tables__item js-tab-item">

        <div><input type="checkbox" name="two4" value="Свет4"> Свет4 </div>
        <div> <input type="checkbox" name="three4" value="Тьма4"> Тьма4</div>
      </div>
      <div class="tables__item js-tab-item">

        <div><input type="checkbox" name="two5" value="Свет5"> Свет5 </div>
        <div> <input type="checkbox" name="three5" value="Тьма5"> Тьма5</div>
      </div>
    </div>

    <div class="buttons">
      <button class="prev">Назад</button>
      <button class="next">Далее</button>
      <button class="result">Рузельтат</button>
    </div>

  </div>
</div>

Yе могу понять как к табам прикрутить кнопки (влево, вправо).

Кнопка далее должна по умолчанию иметь атрибут disabled, пока в контенте не активировали checkbox или радио button. На первой вкладке кнопки назад не должно быть. Так же в самих табах каждая новая вкладка должна подсвечиваться красным, сейчас только активная подсвечивается, и должна подсвечиваться после того как нажали кнопку далее. На последнем экране должна показываться кнопка Результат и Назад.

Сами табы (Вопрос 1 и тд) нажимать нельзя


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