Показать контент табов при нажатии на radio input

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.trim().split(' ')[1];

  letters.push(letter);

  letters = [...new Set(letters)];
  
  itemList.push({
    id: i,
    content: el.innerHTML,
    letter
  });
  
  const lettersMap = letters.map(el => {
    return `<label><input name="b" type="radio" value=${el}>${el}</label>`
  });

  document.querySelector('.results .tabs').innerHTML = lettersMap.join('')

});

document.querySelectorAll('.tabs input').forEach(tab => {
  tab.onclick = (e) => {
  
  const FilteredList = itemList.filter(item => item.letter === e.target.value).map(item => `<li>${item.content}</li>`);
  
  document.querySelector('.results .content').innerHTML = FilteredList
      
  e.target.closest(".results").querySelector(".content").classList.add("show");

    const pd = document.querySelector(".productdetails")
    if (pd) {
      pd.remove()
    }
  }

});

.results {
  border: 2px solid black;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.content {
  display: none;
}

.content.show {
  display: initial;
}

.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}

<div class="results">
  <ul class="tabs"></ul>
  <ul class="content">Контент</ul>
</div>


<ul class="productdetails">


  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок A</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок B</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок C</h3>

  </li>
</ul>