title: Is it possible to add dropzone form by onclick javascript
body: <p>Hello I am working with <code>[dropzone.js]</code> (drag-drop files library)
  I want the user could click some button and the Dropzone form will be added. (I have already 1 dropzone form and after user click add,  the second Dropzone form will be shown.)</p>
  
  <p>but my problem is after clicking add button, dropzone form is added successfully but cannot upload the file.  How should I do to make it upload like the first Dropzone form?    <strong>(Oh and if I write the second dropzone form normally, it work fine. but if onclick add second dropzone-form  it's not work.)</strong></p>
  
  <p>here is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  count=2;
  function add_ptg_input()   //onclick to add dropzone-form function
  { if(count&lt;50)
      {
      var newspan = document.createElement('span');
      newspan.innerHTML = '&lt;form id="uploadfree" class="dropzone dz-clickable" action="test2.php" method="post" style="width:400px;" &gt; \
    &lt;div class="dropzone-previews"&gt;&lt;/div&gt; \
       &lt;input type="text" name="free" /&gt; \
      &lt;button type="submit"&gt;Submit data and files!&lt;/button&gt; \
      &lt;div class="dz-default dz-message"&gt;&lt;span&gt;Drop files here to upload&lt;/span&gt;&lt;/div&gt; \
      &lt;/form&gt; ';
      document.getElementById('add_ptg').appendChild(newspan);
  
      count++;
      }   
  }
  &lt;/script&gt;
  
  &lt;script&gt;
    //Just a config to make dropzone can use with other form input 
  
  
      Dropzone.options.uploadfree = {
  
    autoProcessQueue: false,
    parallelUploads: 100,
    maxFiles: 100,
  
    init: function() {
      var myDropzone = this;
  
      this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });
  
      this.on("sendingmultiple", function() {
      });
      this.on("successmultiple", function(files, response) {
      });
      this.on("errormultiple", function(files, response) {
      });
    }
  }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>     &lt;body&gt;
              &lt;a href="javascript:void(0);" onClick="add_ptg_input();" style="position:absolute; margin-left:10px;"&gt;Add&lt;/a&gt;
              &lt;div id="add_ptg"&gt;
              &lt;form id="uploadfree" class="dropzone" action="test2.php" method="post" style="width:400px;" &gt;
                &lt;div class="dropzone-previews"&gt;&lt;/div&gt; &lt;!-- this is were the previews should be shown. --&gt;
  
                &lt;!-- Now setup your input fields --&gt;
                &lt;input type="text" name="free" /&gt;
                &lt;button type="submit"&gt;Submit data and files!&lt;/button&gt;
              &lt;/form&gt;
  
      &lt;!-- if I write the second form normally, it work fine, but by onclick event to add form, it cannot upload. 
  &lt;form id="uploadfree" class="dropzone" action="test2.php" method="post" style="width:400px;" &gt;
                &lt;div class="dropzone-previews"&gt;&lt;/div&gt; &lt;!-- this is were the previews should be shown. --&gt;
  
                &lt;!-- Now setup your input fields --&gt;
                &lt;input type="text" name="free" /&gt;
                &lt;button type="submit"&gt;Submit data and files!&lt;/button&gt;
              &lt;/form&gt; --&gt;
  
              &lt;/div&gt;
  
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>