title: Multiple dropzone.js in single page php
body: <p>Hey Guys I have problem with multiple dropzone.js in a single page. You can have look into my code below.</p>
  
  <p>HTML and php code:</p>
  
  <pre><code>&lt;?php for($i=0; $i= const; $i++){?&gt;
      &lt;form id="upload1-&lt;?php echo $i; ?&gt; " method="post" enctype="multipart/form-data"&gt;
        &lt;input type="hidden" id="key" name="key" value="&lt;?php echo $key;?&gt;"&gt;
        &lt;div id="dZUpload-&lt;?php echo $i?&gt;" class="dropzone dZUpload"&gt;
           &lt;div class="dz-default dz-message"&gt;&lt;/div&gt;
              &lt;button type="button" class="btn btn-primary pull-right submit_files" id="&lt;?php echo $key;?&gt;"&gt;Submit this form!&lt;/button&gt;
          &lt;/div&gt;
       &lt;/form&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>And this is my javascript part of the code</p>
  
  <pre><code>$(document).ready(function(){
  
      Dropzone.autoDiscover = false;
      var key;
      for (var i = 1; i &lt;= $('.dropzone').length; i++) {
      if("dZUpload-"+i){
          $("#dZUpload-"+i).dropzone({
              url: "&lt;?php echo site_url('uploadfile.html');?&gt;",
              paramName: "file", 
              maxFilesize: 2,
              autoProcessQueue: false,
              addRemoveLinks: true,
              uploadMultiple: true,
              parallelUploads: 100,
              maxFiles: 100,
              init: function() {                    
                  var myDropzone = this; // closure 
                  $(".submit_files").off().on("click", function(e) {
                      key = $(this).attr('id');
                      e.preventDefault();
                      e.stopPropagation();
                      console.log(myDropzone);
                      alert(myDropzone.getAcceptedFiles());
                          if (myDropzone.getQueuedFiles().length &gt; 0) {                        
                              myDropzone.processQueue();  
                          }                                   
  
                      myDropzone.processQueue();              
                  }); 
  
                  this.on("sendingmultiple", function(file, xhr, formData) {                      
                      formData.append("key_campiagn", key); 
                  });   
              },
              success: function (file, response) {
                  var imgName = response;
                  file.previewElement.classList.add("dz-success");         
              },
              addfiles: function(file) {
                              alert(file);
              },
              error: function (file, response) {
                  file.previewElement.classList.add("dz-error");
              }
          });
      }
      }
      });
  </code></pre>
  
  <p>So for the first dropzone if I drap and drop a file and console.log(myDropzone) . I find a attritube file if is empty. But when I drag and drop a file in the last dropzone then the attribute has the details of the file I have dragged and dropped . So what is wrong going with my code any help. I want all the dropzone to submit the files the the hidden input field values to a desired url.But the templates are being created in each dropzone when I drag and drop the images.</p>