js hakkında bir yardım

selamlar, uzamanlardan ufak bir yardıma ihtiyacım var.
30 üzerinde farkli IDlerde ürünlerim var. ürünler bir slide içinde tel döngü ile kendini loop ediyor. yani her ürünün benzersiz ID'si var.

30 farklı ürün. 30 farklı içerik. asagida belirttiğim kodlarla ürünlere ait div içine istatistikleri yazdırıyorum % olarak.

benim istegim her ürüne bunu yapabilmek.

asagida bulunan kod blokları sadece ilk div verisini getiriyor. her urun id'sine aynı JS kodlarını tekrar tekrar yazdırmak çözüm mü? 30 kere aynı kodu cagirmak cok hantal.

bilgisi olan arkadaslardan ricam

asagida kodlara gore DIV alanını looplamam lazim.

asagida bulunan kod looplana bilir mi? 1 js ile 2 farkli ID sahip DIV yazdırabilir miyim?



html kodum su;

 <h1 id="donation--UserTEST" class="donation--UserTEST"></h1>
<span id="donation--goalTEST" class="donation--goalTEST"></span>
<div class="donation--barTEST">
<div id="donation--progressTEST" class="donation--progressTEST" style="width: 0;"></div>
<div id="donation--numberTEST" class="donation--numberTEST" style="left: 0;"></div>
<span id="donation--statusTEST" class="donation--statusTEST"></span>
</div>

css kodum su

.donation--barTEST {
position: relative;
width: 100%;
height: 25px;
background-color: #e7edf4;
border-radius: 100px 0 0 100px;
}

.donation--progressTEST {
position: relative;
max-width: 100%;
height: 100%;
background-color: #47cf73;
transition: width 2s linear;
}

.donation--numberTEST {
transition: left 2s linear;
position: absolute;
top: -18px;
transform: translate(-50%, -100%);
padding: 4px 10px;
color: #47cf73;
font-size: 13px;
font-weight: 300;
background-color: #525961;
border-radius: 3px;
}

js kodum şu:

"use strict";

// Function to find percentage
function percentage(a, b) {
return a / b * 100 > 100 ? 100 : a / b * 100;
}

//On Window Load
window.onload = function() {

//UserTEST Object
var UserTEST = {
name: "Francisdco",
donationCollectTEST: 15,
donationGoalTEST: 100
};

// IDs
var donationUserTEST = document.getElementById("donation--UserTEST"),
donationprogressTEST = document.getElementById("donation--progressTEST"),
donationnumberTEST = document.getElementById("donation--numberTEST"),
donationGoalTEST = document.getElementById("donation--goalTEST"),
donationstatusTEST = document.getElementById("donation--statusTEST");

var percent = percentage(UserTEST.donationCollectTEST, UserTEST.donationGoalTEST);
donationUserTEST.innerHTML = "Your progressTEST <span class='green'>" + UserTEST.name + "<span>";
donationprogressTEST.setAttribute("style", "width:" + percent + "%");
donationnumberTEST.setAttribute("style", "left:" + percent + "%");
donationnumberTEST.innerHTML = percent + "%";
donationstatusTEST.innerHTML = + (UserTEST.donationGoalTEST - UserTEST.donationCollectTEST) ;

};

Hocam yanlış anlamadıysam html kodunuz loop un tek bi parçası ve bu parçayı tüm ürünlere uygulamak istiyorsunuz.
Burda temel sıkıntı div id leri. Div id leri tek div de kullanılır js bundan dolayı 1. div i işleyecektir. Sınıf mantıgında gitmek daha mantıklı olacaktır.

İkincil olarak html blogunu js içinde oluşturup, loop a sokup, en son ana elementin içine atabilirsiniz.

Yanlış anladıysam kusura bakmayın

Aşağıda ki gibi bi yöntem denendebilir
https://codepen.io/mikropiks/pen/KKdOEQy

yardımınız için cok tesekkür ederim. zahmet edip, kod bile yazmışsınız.

söylediklerinize göre div yapimi komple değiştirdim. id göre değil, class'a gore loop atiyorum.

benim aslinda isteğim şu;

https://codepen.io/daiky00/pen/YpNqjM#_=_

burayi kendi loop'um içene alacagim. bunu nasil yapabilirim?

yani bir sayfada 2 defa üstteki verdiğim örnek nasil calistirilir?

Aşağıdaki örneği bir inceleyebilirsiniz

https://jsfiddle.net/myogdem/584sepL6/1/

ilginiz için teşekkürler.

data-width="37000000000"

yaptigimiz zaman işin rengi değişiyor. yani atiyorum bu bir bagis ürünü olsun.

hedeflenen bagis tutari 500000000 TL oldugu zaman değeri de, yapısı da bozulacak. postta attigim ornekte ise js'ye "indicator percentage" yüklüyoruz.
yani stabil ornek aslinda bu hesabi yapmali ben zaten degerleri veriyorum, o sadece "percentage" edebilmeli.