title: jquery increment only works in chrome
body: <pre><code>$(".incrementer").click(function(){
      var values = $("#layernumber").val(); 
      var item = $("input[type=file]:last").clone(true);
      var txt = $(".layer_selector:last").after('&lt;br&gt;').clone(true);
      if($("#layernumber").val() &lt; 4){
          $("#attach").append(item);
          $("#attach").append(txt);
      }  
      if($("#layernumber").val() &gt; 2){
          $(".incrementer").hide();
      }
  });
  </code></pre>
  
  <p>The above code increments the value of layers <a href="https://i.stack.imgur.com/2XDAH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2XDAH.png" alt="enter image description here"></a></p>
  
  <p>as the layers increments the file upload option will also.</p>
  
  <p>But this works only in Chrome. Not in FireFox or Internet Explorer.</p>
  
  <p>HTML code is:</p>
  
  <pre><code>&lt;div class="tab-pane active" id="tab2"&gt;
      &lt;h3 class="block"&gt;Provide your layer details&lt;/h3&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-md-3"&gt;Number of layer
              &lt;span class="required" aria-required="true"&gt; * &lt;/span&gt;
          &lt;/label&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="input-group bootstrap-touchspin"&gt;
                  &lt;span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"&gt;&lt;/span&gt;
                  &lt;input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;"&gt;
                  &lt;span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"&gt;&lt;/span&gt;
                  &lt;span class="input-group-btn-vertical"&gt;
                      &lt;button class="btn btn-default bootstrap-touchspin-up" type="button"&gt;
                          &lt;i class="glyphicon glyphicon-plus incrementer"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-default bootstrap-touchspin-down" type="button"&gt;
                          &lt;i class="glyphicon glyphicon-minus decrementer"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;span class="help-block"&gt; Provide your number of layers &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- fileupload starts--&gt;        
      &lt;!-- --&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-md-3"&gt;Choose Layer
              &lt;span class="required" aria-required="true"&gt; * &lt;/span&gt;
          &lt;/label&gt;
          &lt;div class="col-md-9"&gt;
              &lt;div id="attach"&gt;
              &lt;div id="previewImg"&gt;&lt;/div&gt;
                  &lt;div class="col-md-9"&gt;
                  &lt;input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple=""&gt;
                  &lt;select id="layerid" class="layer_selector" name="layer_selector"&gt;
                     &lt;option value=""&gt;Please Select&lt;/option&gt;    
                     &lt;option value="0"&gt;First&lt;/option&gt;
                     &lt;option value="1"&gt;Second&lt;/option&gt;
                     &lt;option value="2"&gt;Intermediate&lt;/option&gt;
                     &lt;option value="3"&gt;Final&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
              &lt;br&gt;   
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- fileupload ends--&gt;
  &lt;/div&gt;
  </code></pre>