Javascript-форум - Прочитать из data-аттрибута и вставить html-по шаблону

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Прочитать из data-аттрибута и вставить html-по шаблону (https://javascript.ru/forum/misc/83671-prochitat-iz-data-attributa-i-vstavit-html-po-shablonu.html)

Прочитать из data-аттрибута и вставить html-по шаблону

Не пойму как сделать. Есть список с номером id в data-атрибутах, как прочитать его в каждом пункте списка <li></li> и вставить туда html по шаблону с таким же атрибутом. Пример

Это шаблон который вставить:

<div class="favorites" data-product-id="111111">
<a href="" class="del">Удалить</a> 
</div>

соответственно data-product-id="111111" меняется на data-product-id="111111" который уже есть у <li></li>

<ul class="s-list">
<li class="wrapper" data-product-id="111111">
<div class="favorites" data-product-id="111111">
<a href="" class="del">Удалить</a>
</div>
</li>
<li class="wrapper" data-product-id="222222">
<div class="favorites" data-product-id="222222">
<a href="" class="del">Удалить</a>
</div>
</li>
</ul>

document.querySelectorAll('li[data-product-id]').forEach(li => li.insertAdjacentHTML('beforeend', `
  <div class="favorites" data-product-id="${li.getAttribute('data-product-id')}">
    <a href="" class="del">Удалить</a>
  </div>
`));

Спасибо, работает!