jquery increment only works in chrome

Question

$(".incrementer").click(function(){
    var values = $("#layernumber").val(); 
    var item = $("input[type=file]:last").clone(true);
    var txt = $(".layer_selector:last").after('<br>').clone(true);
    if($("#layernumber").val() < 4){
        $("#attach").append(item);
        $("#attach").append(txt);
    }  
    if($("#layernumber").val() > 2){
        $(".incrementer").hide();
    }
});

The above code increments the value of layers

as the layers increments the file upload option will also.

But this works only in Chrome. Not in FireFox or Internet Explorer.

HTML code is:

<div class="tab-pane active" id="tab2">
    <h3 class="block">Provide your layer details</h3>
    <div class="form-group">
        <label class="control-label col-md-3">Number of layer
            <span class="required" aria-required="true"> * </span>
        </label>
        <div class="col-md-4">
            <div class="input-group bootstrap-touchspin">
                <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                <input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;">
                <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
                <span class="input-group-btn-vertical">
                    <button class="btn btn-default bootstrap-touchspin-up" type="button">
                        <i class="glyphicon glyphicon-plus incrementer"></i>
                    </button>
                    <button class="btn btn-default bootstrap-touchspin-down" type="button">
                        <i class="glyphicon glyphicon-minus decrementer"></i>
                    </button>
                </span>
            </div>
            <span class="help-block"> Provide your number of layers </span>
        </div>
    </div>
    <!-- fileupload starts-->        
    <!-- -->
    <div class="form-group">
        <label class="control-label col-md-3">Choose Layer
            <span class="required" aria-required="true"> * </span>
        </label>
        <div class="col-md-9">
            <div id="attach">
            <div id="previewImg"></div>
                <div class="col-md-9">
                <input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple="">
                <select id="layerid" class="layer_selector" name="layer_selector">
                   <option value="">Please Select</option>    
                   <option value="0">First</option>
                   <option value="1">Second</option>
                   <option value="2">Intermediate</option>
                   <option value="3">Final</option>
                </select>
                </div> 
            </div>
            <br>   
        </div>
    </div>
    <!-- fileupload ends-->
</div>

Answer 1

I have made a fiddle for this.

https://jsfiddle.net/w1gy8ruj/1/

The changes i did to your code is basically initialise the value of the layernumber input to 0 and increment it on every click.

$(document).ready(function() {
  $(".incrementer").click(function() {
    var values = $("#layernumber").val();
    var item = $("input[type=file]:last").clone(true);
    var txt = $(".layer_selector:last").after('<br>').clone(true);
    if ($("#layernumber").val() < 4) {
      $("#attach").append(item);
      $("#attach").append(txt);
    }
    if ($("#layernumber").val() > 2) {
      $(".incrementer-button").hide();
    }

    values++;
    $("#layernumber").val(values);
  });

});

Answer 2

You do not use

var values = $("#layernumber").val(); 

anywhere in this scope, so this is unneeded unless you don't want to use it in the if statement below and for incrementing.

And you do not increment the layernumber, so

if($("#layernumber").val() > 2) {

will never execute. You should increment it and set it like

$("#layernumber").val(values)