Как сделать, чтобы данный код применялся ко всем .productdetails
?
const ul = document.querySelector('.productdetails');
const data = [...ul.children].reduce((acc, n) => {
const k = n.innerText[0].toLowerCase();
(acc[k] = acc[k] || []).push(n.outerHTML);
return acc;
}, {});
const html = Object
.entries(data)
.map(([ k, v ]) => `<div class="hua-rotate">${k}</div><ul class="${k}-litter">${v.join('')}</ul></div>`)
.join('');
ul.insertAdjacentHTML('afterend', html);
ul.remove();
<ul class="productdetails">
<li><a>Acer</a></li>
<li><a>Xiaomi</a></li>
<li><a>Samsung</a></li>
</ul>
<ul class="productdetails">
<li><a>Acer</a></li>
<li><a>Xiaomi</a></li>
<li><a>Samsung</a></li>
</ul>