title: Adding file inputs dynamically with jquery?
body: <p>To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.</p>
  
  <p>My thought is that when the first input is set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.</p>
  
  <p>Is this possible to to with Jquery?</p>
  
  <p>Edit1: This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:</p>
  
  <p>In the view:</p>
  
  <pre><code>        &lt;div id="fileInput0" class="fileVisible"&gt;
              &lt;input type="file" id="file0" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(0)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput1" class="fileHidden"&gt;
              &lt;input type="file" id="file1" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(1)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput2" class="fileHidden"&gt;
              &lt;input type="file" id="file2" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(2)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput3" class="fileHidden"&gt;
              &lt;input type="file" id="file3" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(3)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput4" class="fileHidden"&gt;
              &lt;input type="file" id="file4" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(4)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput5" class="fileHidden"&gt;
              &lt;input type="file" id="file5" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(5)" /&gt;
          &lt;/div&gt;         
          &lt;div id="fileInput6" class="fileHidden"&gt;
              &lt;input type="file" id="file6" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(6)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput7" class="fileHidden"&gt;
              &lt;input type="file" id="file7" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(7)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput8" class="fileHidden"&gt;
              &lt;input type="file" id="file8" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(8)" /&gt;
          &lt;/div&gt;
          &lt;div id="fileInput9" class="fileHidden"&gt;
              &lt;input type="file" id="file9" name="files" /&gt;
              &lt;input type="button" value="Töm" onclick="resetFileField(9)" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The Script:</p>
  
  <pre><code>function fileChangeHandler() {
  
      var hiddenClass = 'fileHidden';
      var visibleClass = 'fileVisible';
  
      var parentDiv = $(this).parent;
      var idNr = $(this).attr('id').replace('file', '');
  
      idNr++;
  
      if($(this).val().length &gt; 0){
  
          for(var i = idNr; i &lt; 10; i++){
              if($('#fileInput' + i).hasClass(visibleClass)){
                  if($('#file' + i).val().length &lt; 1){ return;}
              }
              else{
                      $('#fileInput' + i).attr('class' , visibleClass);
                      return;
              }
          }
      }
  }
  
  function resetFileField(id) {
      var hiddenClass = 'fileHidden';
      var visibleClass = 'fileVisible';
      var counter;
  
      $('#fileInput'+id).html($('#fileInput'+id).html());
      $('#file'+id).change(fileChangeHandler);
  
      for(var i = 9; i &gt; -1 ;i--)
      {
  
          if(id != i)
          {
              if($('#fileInput' + i).hasClass(visibleClass)){
                  if($('#file' + i).val().length &lt; 1){
                      $('#fileInput' + i).attr('class', hiddenClass);
                  }
              }
          }
      } 
  }
  </code></pre>
  
  <p>What is a better solution?</p>