Timeline on dynamically created div creates issue. That last timeline replacess all other previous div.

[Madhumitha23]

My div is dynamically generated. Inside div, I have to place timeline graphs with different timezones. When user clicks on a country, it displays the timeline graph for the selected country name.

There are no issues when first item is selected. But when there are multiple items, it displays the timezone of the latest selected item to all the previously displayed timelines.

Please find the below code:

 var arrDivs = document.querySelectorAll('div[class^="myGeneratedDiv"]');
var timelineGraph = [];    
for (var i = 0; i < arrDivs.length; i++) {
  var oDiv = arrDivs[i];
  if (oDiv.id && oDiv.id.startsWith("Location_")) {

    var LocationName = oDiv.id.toString().split("_")[1];

    var items = new vis.DataSet ([

    ]);     

    var timelineLocal = new vis.Timeline(document.getElementById(oDiv.id), items, {
      editable: true,
      start: start,
      end: end,
      moment: function (date) {
        return moment(date).tz(LocationName);

      },
      format: {
        minorLabels: {
          hour: 'hh:mm'
        }
      }
    });

  }
}

[asiby]

I have not ran your code, but you might be having a scope issue. Try using let instead of var when declaring your variables.

Let us know how that goes please.