Add an multiple Element each Button clicked

Question

I have a 5 buttons and each button click will add each element. My concern is when I click back to previous button I click. I need a previous element only will be add and other will be remove.. example: if click 5. it shows 5 add(element) if then I click back to click3 it show only 3 elements and remove element[5] and element[4].

let clickItem;
for (let c = 1; c < 6; c++) {
  clickItem = document.getElementsByClassName('click-item-' + c);
  $(clickItem).on('click', function() {
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>

<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Answer 1

You can add a function that put the inactive class to all items and then, re-run the function.

let clickItem;
for (let c = 1; c < 6; c++) {
  clickItem = document.getElementsByClassName('click-item-' + c);
  $(clickItem).on('click', function() {
    resetContext()
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

const resetContext = () => {
  const elements = document.getElementsByClassName("add-item");
  for (const elem of elements){
    elem.classList.remove('active');
    elem.classList.add('inactive');
  }
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>

<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>