Several identical java scripts on one page

Question

I have a script from the echarts library, with which I build charts on my html page. I'm trying to call it several times for different tabs of my tabbable regions (nav-tabs). I include the echarts library itself at the end of the body block

<script src="{% static 'js/echarts.min.js' %}"></script>

The code of the script executed several times on the page is as follows:

document.addEventListener("DOMContentLoaded", () => {
echarts.init(document.querySelector("#trafficChart1")).setOption({
tooltip: {
    //tooltip settings
},
legend: {
    //legend settings
},
series:[{
    //diagramm settings
data: [
   {value: 50,  name: 'Region_100'},
   {value: 150, name: 'Region_200'},
   {value: 250, name: 'Region_300'}
      ]
}]
});
});

For each of the tabs I tried using a different selector:

<div id="trafficChart1" style="min-height: 300px;" class="echart"></div>   
<script> 
    //here is the code of the above script
</script> 

Accordingly, for the other two tabs the code will be the same, but the selectors (#trafficChart2, #trafficChart3) and data for the charts will change.

In the end, it all looks something like this (the first tab of the nav-tabs block)

the first tab of the nav-tabs block 2021

But in the 2022 and 2023 tabs the charts are not displayed, although they are marked with identifiers ('trafficChart2' and 'trafficChart3' respectively).

2022 and 2023 tabs where charts are not displayed

Help me understand how to implement the construction of diagrams in different tabs of a nav-tabs block, that is, in essence, call the javascript several times on one page.