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

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.

body=''; line 23

This line removes all charts created and searched by the renderChart function. You might want to either remove this line, otherwise the DOMElement you are trying to access will be removed by the time it's accessed, or use const element = document.createElement('DIV') and append your element to the body and then pass the reference to that object to renderChart(element) to avoid ID generation