Почему скрипт выбирает символ "<" вместо буквы "C"?

Почему скрипт выбирает символ "<" вместо буквы "C"? Когда появляется тег <noscript>, скрипт забирает его содержимое, вместо слова "Ссылка 1", без него всё работает корректно.

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetaiils li').forEach((el, i) => {
  const letter = el.innerText.trim().split(' ')[0][0];
  letters.push(letter);
  letters = [...new Set(letters)];
  itemList.push({
    id: i,
    content: el.innerHTML,
    letter
  });

  const lettersMap = letters.map(el => {
    return `<label class="example-lk"><input class="downers form-check-input" name="b" type="radio" value=${el} autocomplete="off">${el}</label>`
  });
  document.querySelector('.results .tabs').innerHTML = lettersMap.join('')
});

document.querySelectorAll('.tabs input').forEach(tab => {
  tab.onclick = (e) => {
    if (tab.name !== "b") return;
    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()
    }
  }
});
.productdetaiils {
  display: none;
}

span {
  display: block;
  width: 200px;
  border: 1px solid black;
  text-align: center;
  padding: 10px;
}
<div class="tabs-stage">
  <div class="rower">
    <h3 class="frst-rep-ttl">Выберите неисправность устройства:</h3>
    <div class="fix-item first-check">
      <input autocomplete="off" id="link1" class="linkinp form-check-input" name="c" type="radio" value="?start=1">Ссылка 1

    </div>
  </div>
</div>


<ul class="productdetaiils">
  <li>
    <div class="entry-image intro-image"><img src="https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png">
      <noscript><img src=https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png alt="Aspire 5732ZG" itemprop=thumbnailUrl /></noscript>
    </div>
    <input type="radio" class="form-check-input" value="/all/laptops/acer/aspire-r-13-r7-372t-520q" name="a"> Ссылка 2
  </li>
  <li>
    <div class="entry-image intro-image">
      <input type="radio" class="form-check-input" value="/all/laptops/acer/aspire-r-13-r7-372t-520q" name="a"> Вторая ссылка 2
  </li>
</ul>
<div class="results">
  <ul class="tabs"> </ul>
  <ul class="content"></ul>
</div>


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

Автор решения: vp_arth

Не совсем ответ, скорее демонстрация проблемы.
innerText выбирает содержимое скрытого noscript не так, как вы ожидаете:

console.log(document.getElementById('test1').innerText);
console.log(document.getElementById('test2').innerText);
#test1 {display: none;}
<div id=test1>A<noscript><span>X</span></noscript>B</div>
<div id=test2>A<noscript><span>X</span></noscript>B</div>

→ Ссылка