Как сделать вывод выбранного элемента

document.querySelectorAll('[data-control]').forEach(item => {
  item.addEventListener('click', event => {
    event.preventDefault();
    handleFilterItems(item);
  });
});

function handleFilterItems(filterItem) {
  if (filterItem.getAttribute('data-control') === '' || filterItem.getAttribute('data-control') === '.all') {
    document.querySelectorAll('[data-control]').forEach(item => {
      item.classList.remove('_active');
    });
  } else {
    document.querySelector('[data-control=".all"]').classList.remove('_active');
  }
  if (filterItem.classList.contains('_active')) {
    filterItem.classList.remove('_active');
    // check if no other filter item is active
    if (!document.querySelectorAll('[data-control]._active').length) {
      document.querySelector('[data-control=".all"]').classList.add('_active');
    }
  } else {
    filterItem.classList.add('_active');
  }
  handleFilterTeaser();
}

function handleFilterTeaser() {
  document.querySelectorAll('.all').forEach(item => {
    item.classList.add('_hidden');
  });
  if (document.querySelectorAll('[data-control]._active').length === 0) {
    document.querySelectorAll('.all').forEach(item => {
      item.classList.remove('_hidden');
    });
  } else {
    document.querySelectorAll('[data-control]._active').forEach(item => {
      let filterTag = item.getAttribute('data-control');
      document.querySelectorAll(filterTag).forEach(tag => {
        tag.classList.remove('_hidden');
      });
    });
  }
}

ul,
li {
  list-style: none;
  display: inline-block;
}

button {
  padding: 10px;
}

button:hover {
  color: green;
}

button._active {
  color: tomato;
}

.list>div {
  background: grey;
  margin-bottom: 10px;
  color: #fff;
  padding: 10px;
}

._hidden {
  display: none;
}

.show-choice {
  width: max-content;
  border: 1px solid red;
  padding: 10px;
  margin: 0 0 20px;
}

._hidden {
  display: none;
}

.show-choice {
  width: max-content;
  border: 1px solid red;
  padding: 10px;
  margin: 0 0 20px
}

<div>
  <ul>
    <li>
      <button class="_active" data-control=".all">all</button>
    </li>
    <li>
      <button data-control=".a">a</button>
    </li>
    <li>
      <button data-control=".b">b</button>
    </li>
    <li>
      <button data-control=".c">c</button>
    </li>
  </ul>
  <div class="show-choice">
    <div id="choise">
      <span>a 1, b 2, a b 3, b 4, a 5, c 6</span>
    </div>
  </div>
</div>
<div class="list">
  <div class="all a">a 1</div>
  <div class="all b">b 2</div>
  <div class="all a b">a b 3</div>
  <div class="all b">b 4</div>
  <div class="all a">a 5</div>
  <div class="all c">c 6</div>
</div>