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

[Ops]

Не пойму как сделать. Есть список с номером 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>

[Aetae]

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>
`));

[Ops]

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