I am loading a toggled sidebar's content when a category is selected from a list on the main page. In this sidebar, I am using ajax to retrive the sub-categories for that category and display them.

For each sub-category, I need to create a chartjs line chart and display it in the sidebar. The number of sub-categories can vary, so sometimes the code it returns many be:

<h1> Sub-Category 01</h1>
<div><canvas id="line-chart01"></canvas></div>

Then sometimes, it might generate two or three.

<h1> Sub-Category 01</h1>
<div><canvas id="line-chart01"></canvas></div>

<h1> Sub-Category 02</h1>
<div><canvas id="line-chart02"></canvas></div>

The code to generate the chartjs objects would need to be similar to this, but I am stuck as to how to generate this on the main page as I only know how many charts to generate after the category has been selected:

new Chart(document.getElementById("line-chart01"), {
type: 'line',
data: {
labels: ['Jan','Feb','Mar', 'April'],
datasets: [{ 
    data: [86,114,106,106],
    label: "Values",
    borderColor: "#3e95cd",
    fill: false
  }
]
},
options: {}
});

The function which opens the sidebar and loads the content is:

function openSidebar(catID){
    
    var dataString = 'catID='+catID;
    $.ajax({
    type: "POST",
    url: "load.php",

    data: dataString,
    cache: false,
    success: function(html) {
         document.getElementById("sidebarContent").innerHTML = html;
    }
    });
            
}

Can anyone suggest how to go about this? I have found threads loading new data and updating a chart which has been generated on the page already, but nothing related to what I'm trying to do here. Thanks.