Получение элементов TypeError [i] .find не является функцией рендеринга динамического div и загрузки файла с использованием jspdf.

Question

У меня есть пример кода, в котором я загружаю PDF-файл с помощью плагина jspdf, где у меня есть 2 кнопки при нажатии второй кнопки. Я могу создавать динамические диаграммы, где при нажатии кнопки загрузки я загружаю содержимое всех диаграмм, созданных динамически в формате PDF. формат. Здесь статически pdf файл загружается без ошибок, но когда я использую динамический div и добавляю, я получаю сообщение об ошибке типа «TypeError: elements [i] .find не является функцией», я обновил код на поршне http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview. Вот HTML и JavaScript для справки.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="jspdf.debug.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="https://github.com/devongovett/pdfkit/releases/download/v0.6.2/pdfkit.js"></script>
  <script src="rgbcolor.js"></script>
  <script src="canvg.js"></script>
  <script src="script.js"></script>
 <input type="button" id="download" value="download" /> Please click on this button to get chart with html content on pdf
  <div><button id="button1" class="button1">submit1</button></div>
  <div class="white-back row" style="padding: 1.5rem;" id="tvgMainCnt">
    <div id="top-content">
      <div>
        <div>
          logo
        </div>
        </div>
      <div style="margin-top: 1rem;">
        <p>
          Dear members,
        </p>
      </div>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
      </div>
      <br />
      <div style="margin-top: 1rem;">
        <p>
          Download of chart with html content should work with multiple chart.
        </p>
      </div>
    </div>
    <div id="middle-content">
      <div id="testchart"></div>
      <div id="testchart2"></div>
    </div>
    <div id="bottom-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
  </div>  

Сценарий

// Code goes here
$(document).ready(function() {
    var index = 0;
    var id = [];
  $('#button1').on('click', function() {
    $('body').append($("<div id='chart-" + index + "'></div>"));

    Highcharts.chart('chart-' + index, {
        series: [{
            data: [1, 2, 3]
        }]
    });

    index++;
    var temp="$('#chart"+index+"')";
        id.push(temp);
        console.log('chart' + index);
});



$('#download').on('click', function() {
    var string = JSON.stringify(id);
var strreplace = string.replace (/"/g,'');
console.log(strreplace);
  var doc = new jsPDF('portrait', 'pt', 'a4', true);
  var elementHandler = {
    '#ignorePDF': function(element, renderer) {
      return true;
    }
  };

  var source = document.getElementById("top-content");
  doc.fromHTML(source, 15, 15, {
    'width': 560,
    'elementHandlers': elementHandler
  });

  var DOMURL = window.URL || window.webkitURL || window;
  var elements = strreplace;

  for (let i in elements) {

      var svg = document.querySelector('svg');
      var canvas = document.createElement('canvas');
      var canvasIE = document.createElement('canvas');
      var context = canvas.getContext('2d');

      var data1 = (new XMLSerializer()).serializeToString(svg);
      canvg(canvas, data1);
      var svgBlob = new Blob([data1], {
        type: 'image/svg+xml;charset=utf-8'
      });

      var url = DOMURL.createObjectURL(svgBlob);

      var img = new Image();
      img.onload = function() {
        context.canvas.width = (elements[i]).find('svg').width();
        context.canvas.height = elements[i].find('svg').height();

        context.drawImage(img, 0, 0);
        // freeing up the memory as image is drawn to canvas
        DOMURL.revokeObjectURL(url);

        var dataUrl;
        if (isIEBrowser()) { // Check of IE browser 
          var svg = $(elements[i]).highcharts().container.innerHTML;
          canvg(canvasIE, svg);
          dataUrl = canvasIE.toDataURL('image/JPEG');
        } else {
          dataUrl = canvas.toDataURL('image/jpeg');
        }

        doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);

          var bottomContent = document.getElementById("bottom-content");
  doc.fromHTML(bottomContent, 15, 700, {
    'width': 560,
    'elementHandlers': elementHandler
  });
         doc.fromHTML(source, 15, 15, {
    'width': 560,
    'elementHandlers': elementHandler
  });
  doc.addPage();
      };

      img.src = url;

    }


  setTimeout(function() {
    doc.save('TestChart.pdf');
  }, 2000);

});
});
function isIEBrowser() {
  var ieBrowser;
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
  {
    ieBrowser = true;
  } else //Other browser
  {
    console.log('Other Browser');
    ieBrowser = false;
  }

  return ieBrowser;
};