I am trying to get fabric.js canvas images inside a loop, but it gives me the same canvas image from a loop, whereas it should give me multiple images. The code is:

const canvasSubImages = $('.canvas_sub_image img');
var canvas_data = [];



canvasSubImages.each(function(index, element) {
  $(element).trigger('click');



  setTimeout(function() {
    var canvas = document.querySelector('canvas[fabric]');

    if (canvas) {
      var canvasImage = canvas.toDataURL({ format: 'png', quality: 1.0 });
      canvas_data.push(canvasImage);

      if (canvas_data.length === canvasSubImages.length) {
        console.log(canvas_data);
      }


    } else {
      console.error('Canvas element not found.');
    }
  }, 1000); // Adjust the delay time as needed
});