title: I am getting same highchart in pdf using jspdf when I am downloading the pdf with dynamic ids on click
body: <p>I am using jspdf to capture the content of Hichchart which generating dynamically with dynamic id onclick. Here when I click submit1 button different highchart will generate with dynamic id.Again when I click download button it will download the dynamically created chart content in pdf.I can able to download but same chart is downloading again instead different chart on the page. I have updated the code to demo here 
  <a href="http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview</a> ,Can anyone please help me, I am just putting the html and javascript code here.</p>
  
  <h2>html</h2>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="jspdf.debug.js"&gt;&lt;/script&gt;
   &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/series-label.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://github.com/devongovett/pdfkit/releases/download/v0.6.2/pdfkit.js"&gt;&lt;/script&gt;
    &lt;script src="rgbcolor.js"&gt;&lt;/script&gt;
    &lt;script src="canvg.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  
    &lt;input type="button" id="download"  value="download" /&gt; click to console
    &lt;div&gt;&lt;button id="button1" class="button1"&gt;submit1&lt;/button&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>script.js</h2>
  
  <pre><code>$(document).ready(function() {
      var index = 0;
      var id = [];
      $('#button1').on('click', function() {
          $('body').append($("&lt;div id='chart" + index + "'&gt;&lt;/div&gt;"));
  
          Highcharts.chart('chart' + index, {
             title: {
          text: 'Chart-'+index+''
      },
              series: [{
                  data: [1, 2, 3]
              }]
          });
          var temp = "chart" + index + "";
          console.log(temp);
          id.push(temp);
  
          index++;
      });
  
      $('#download').on('click', function() {
  console.log(id);
    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 = id;
  
   // console.log(xx);
    for (let i in elements) {
        console.log(elements[i]);
        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 &gt; 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
    {
      ieBrowser = true;
    } else //Other browser
    {
      console.log('Other Browser');
      ieBrowser = false;
    }
  
    return ieBrowser;
  };
  </code></pre>