title: multiple dropzone.js css styling
body: <p>Its my first experince with dropzone.js </p>
  
  <p>I've an HTML registration wizard with multiple Dropzone.js in 3 steps , one appears on the first step with css applied to all dropzone classes <code>.dropzone</code> the first dropzone is styled correctly but the rest are not .</p>
  
  <p>on the header i've added links to the dropzone css</p>
  
  <pre><code>     &lt;link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"&gt;&lt;/link&gt;
   &lt;link rel="stylesheet" href="{{ url_for('static', filename='css/dropzone.css') }}"&gt;&lt;/link&gt;
  </code></pre>
  
  <p>my HTML file :</p>
  
  <pre><code>&lt;form id="fzoneForm" class="fzone" action="/upload" method="post"&gt;
    &lt;div class="_dropzone"&gt;General Info:
  &lt;!--- some forms input and lables here --&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;form id="dropzoneForm" class="dropzone" action="/upload" method="post"&gt; 
  
  &lt;!-- upload form 1--&gt;
  &lt;/form&gt;
  
      &lt;form id="fzoneForm2" class="fzone" action="/upload" method="post"&gt;
    &lt;div class="_dropzone"&gt;General Info:
  &lt;!--- some forms input and lables here --&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;form id="dropzoneForm2" class="dropzone" action="/upload" method="post"&gt; 
  
  &lt;!-- upload form 2--&gt;
  &lt;/form&gt;
  
  &lt;form id="fzoneForm3" class="fzone" action="/upload" method="post"&gt;
    &lt;div class="_dropzone"&gt;General Info:
  &lt;!--- some forms input and lables here --&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;form id="dropzoneForm3" class="dropzone" action="/upload" method="post"&gt; 
  
  &lt;!-- upload form 3--&gt;
  &lt;/form&gt;
  
  
   &lt;script&gt;
  
  
   Dropzone.autoDiscover = false;
  
  var dz1 = new Dropzone(
      '#dropzoneForm',
      {
          url : "upload",
          autoProcessQueue: false ,
          paramName: 'file',
          addRemoveLinks: true,
          dictDefaultMessage: 'Drop ID',
          acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
          init: function(){
            var submitButton = document.querySelector('#uploadID');
            myDZ = this;
            submitButton.addEventListener("click",function(){
              myDZ.processQueue();});}});
  </code></pre>
  
  <p>similar code for var <code>dz2</code> and <code>dz3</code></p>
  
  <p>the steps are changed by two buttons <code>next</code> and <code>previous</code> which i have added using javascript but there's no need to add it here.</p>
  
  <p>each one of them are basically on the same page but there <code>display:none</code> unless it's the right step for it </p>
  
  <p>the problem is only the first <code>Dropzone</code> is style correctly the other two are messed up 
  I've checked the <code>Dropzone.css</code> and i'm can see that it suppose to be applied to all classes not the first one only and to be fair it looks like it's but the dashing rectangle is like 2 dashing lines on the left and that's it , only the first dropzone is rendered as a full rectangle with 90% width.</p>