generate multiple charts via loop for chart js

Question

I am trying to only have table tag, but have js generate the entire table. So I use createElement for headers, but within tbody.innerHTML, I am string concatenating string interpolated html that contains tr including canvas inside of a td.

I am dynamically generating this and within the for loop, I try rendering a row, then have another function to create generic chart but fit to specific id of canvas. Ex: bar_1, bar_2, ... I am also using getElementById for new Chart(ctx)

So basically for each row, I want a chart in a td. The issue is, it only shows me 1 chart and it is for the last row only when it should show up for all rows. Which makes me suspect selection by getElementId, but I tried querySelectorAll() id specification, querySelector(#) as well but no luck.

----bar.js---- snippet

let body = ``;
for(var item of productList){

body+=`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.date}</td>
<td><table>`;
for(var props of item.items){
    let currency = props.units==="USD"? "$":""; 
    body+=`<tr>
    <td>${props.item_number}) ${currency}${props.price}</td>
    </tr>`;
}
body+=`</table></td>
<td>
    <div style="border: 2px solid blue;">
    <canvas id="bar_${item.id}"></canvas>
    </div>
</td></tr>`;
tbody.innerHTML += body;

renderChart("bar_"+item.id, item.items, item.name);
body=``;
}
...
function renderChart(id,...){
let config = ... //generic chart config
new Chart(document.getElementById(id),config)
}

Answer 1

I figured out issue was with async events I didn't know about were happening. Only time chart js won't let you create multiple charts is on the same canvas or if it is previously occupied until you destroy it.

let id = "bar_"+item.id;
setTimeout(()=>{renderChart(id, item.items, item.name);},100)

I did something like this within the above snippet. Issue was the extracting of string concat of id was slower than getElementById, which made getElementById get same one. However I was still getting diff canvas elements on console.log testing, so I don't 100% understand how solving one issue solved issue of the actual new Chart being created for each unique canvas.