Back button to previous element don't work as imagine

Question

This is a questionnaire to help people where should they go when they have a certain type of ticket.

I'm currently tinkering with the code that have been answered from previous question, and after realizing the answer was a bit off [If you answer "No" on the first question and press "Back" it doesn't go to the first question but goes to the second question about ticket type].

What I'm thinking is if the tab is currently on id="tab2" then the data-value will be -2 then else will be -1

$(document).ready(function(){
  $(function() {
    $(".tab a").click(function() {
      $(this).parent().addClass("active").siblings(".active").removeClass("active");
      var tabContents = $(this).attr("href");
      $(tabContents).addClass("active").siblings(".active").removeClass("active");
      return false;
    });
  });


  $("button").on("click", function(){
    let currentLevel = $(this).closest('.tab').attr('data-level');
    let prevLevel = parseInt(currentLevel) - 1;
    $('.tab').removeClass("active");
    $('.tab').each(function(index, item) {
      if(parseInt($(item).attr('data-level')) === prevLevel) {
        $(item).addClass('active');
      }
    })
  });
});

.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.yes_part,
.no_part {
  display: flex;
  flex-direction: column;
}

.yes_part {
  padding-right: 2rem;
}

a.yes {
  background-color: #FFB8B8;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

a.no {
  background-color: #B1E0FF;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

.ticket_type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 10px;
}

.ticket_type a {
  padding: 10px 30px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
}

.answer_1 {
  display: flex;
  flex-direction: column;
}

.tab {
  display: none;
}

.tab.active {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<section class="question_wrapper">
  <ul class="tab main-tab active animate__animated animate__fadeInDown" data-level='1'>
    <li class="active">
      <p>Do you have a ticket ?</p>
      <div class="buttons">
        <div class="yes_part">
          <img src="yes.png" alt="">
          <a class="yes" href="#tab1">yes</a>
        </div>
        <div class="no_part">
          <img src="no.png" alt="">
          <a class="no" href="#tab2">no</a>
        </div>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab1" data-level='2'>
    <li>
      <p>Which Ticket do you have ?</p>
      <div class="ticket_type">
        <a href="#tab3">Type 1</a>
        <a href="#tab3">Type 2</a>
        <a href="#tab3">Type 3</a>
        <a href="#tab4">Type 4</a>
        <a href="#tab4">Type 5</a>
        <a href="#tab5">Type 6</a>
      </div>
      <button type="button">Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab2" data-level='3'>
    <li>
      <p>Go buy some ticket then</p>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab3" data-level='3'>
    <li>
      <div class="answer_1">
        <p>Please go to hall A</p>
        <img src="receptionist.png" alt="">
        <button>Back</button>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab4" data-level='3'>
    <li>
      <p>Please go to hall B</p>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab5" data-level='3'>
    <li>
      <p>Please go to hall C</p>
      <button>Back</button>
    </li>
  </ul>
</section>

Answer 1

As mentioned there were numerous typos, missing ifs, extra brackets and such in the JS. It's not really valuable to point them all out here. If you like the solution, you can just copy this and work from there. For the back button, I removed a big IF conditional and replaced it with

$(`.tab[data-level=${prevLevel}]`).eq(0).addClass('active')

Which says *find the first tab with the data-attribute data-level=X and add the class active to it * - and it seems to work.

$(document).ready(function() {
  $(".tab a").click(function() {
    $(this).parent().addClass("active").siblings(".active").removeClass("active");
    var tabContents = $(this).attr("href");
    $(tabContents).addClass("active").siblings(".active").removeClass("active");
    return false;
  });

  $("button").on("click", function() {
    let currentLevel = $(this).closest('.tab').attr('data-level');
    let prevLevel = parseInt(currentLevel) - 1;
     $('.tab').removeClass("active");
     $(`.tab[data-level=${prevLevel}]`).eq(0).addClass('active')
  });
});

.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.yes_part,
.no_part {
  display: flex;
  flex-direction: column;
}

.yes_part {
  padding-right: 2rem;
}

a.yes {
  background-color: #FFB8B8;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

a.no {
  background-color: #B1E0FF;
  padding: 5px 20px;
  text-decoration: none;
  color: black;
  margin-top: 5px;
}

.ticket_type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 10px;
}

.ticket_type a {
  padding: 10px 30px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
}

.answer_1 {
  display: flex;
  flex-direction: column;
}

.tab {
  display: none;
}

.tab.active {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<section class="question_wrapper">
  <ul class="tab main-tab active animate__animated animate__fadeInDown" data-level='1'>
    <li class="active">
      <p>Do you have a ticket ?</p>
      <div class="buttons">
        <div class="yes_part">
          <img src="yes.png" alt="">
          <a class="yes" href="#tab1">yes</a>
        </div>
        <div class="no_part">
          <img src="no.png" alt="">
          <a class="no" href="#tab2">no</a>
        </div>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab1" data-level='2'>
    <li>
      <p>Which Ticket do you have ?</p>
      <div class="ticket_type">
        <a href="#tab3">Type 1</a>
        <a href="#tab3">Type 2</a>
        <a href="#tab3">Type 3</a>
        <a href="#tab4">Type 4</a>
        <a href="#tab4">Type 5</a>
        <a href="#tab5">Type 6</a>
      </div>
      <button type="button">Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab2" data-level='2'>
    <li>
      <p>Go buy some ticket then</p>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab3" data-level='3'>
    <li>
      <div class="answer_1">
        <p>Please go to hall A</p>
        <img src="receptionist.png" alt="">
        <button>Back</button>
      </div>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab4" data-level='3'>
    <li>
      <p>Please go to hall B</p>
      <button>Back</button>
    </li>
  </ul>
  <ul class="tab animate__animated animate__fadeInDown" id="tab5" data-level='3'>
    <li>
      <p>Please go to hall C</p>
      <button>Back</button>
    </li>
  </ul>
</section>