используйте это, если вы хотите создать список из javascript данных, вы можете использовать объекты, но я использовал массивы, потому что вы сказали, что сервер не задействован, поэтому вы будете генерировать данные имен изображений и цен вручную
$(document).ready(function(){
imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg'];
prices=[100000, 200000, 150000, 250000, 300000];
linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
//linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
imgz.map((z,i)=> $('body').append(`
<li class="product-item">
<a id="producItem${i+1}" href='${linkz[i]}'>
<img class="clothes" src="${imgz[i]}">
</a>
<div class="price-holder">
<p id="price${i+1}">${prices[i]}</p>
</div>
</li>`));
});
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script></head>
<body><ul class="product-list"></ul></body></html>
, и если вы хотите создать данные ссылок автоматически, используйте это
linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
вместо linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];