JSFiddle - React, Tailwind, and code Playground

by nniicc

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://sorspbx.rmplus.si/AdTool/_javascript/jquery.numeric.min.js"></script>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">Forma</div>
        <div class="panel-body">
            <form class="navbar-form navbar-left" id='forma' role="search">
                <div class="row" style="margin:5px -15px">
                    <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Firstname 1</span>

                        <input type="number" min="1" class="form-control" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row" style="margin:5px -15px">
                    <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Firstname 2</span>

                        <input type="number" min="1" class="form-control" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row" style="margin:5px -15px">
                    <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Firstname 3</span>

                        <input type="number" min="1" class="form-control" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row" style="margin:5px -15px">
                    <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Firstname 4</span>

                        <input type="number" min="1" class="form-control" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row" style="margin:5px -15px">
     ...

CSS

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

JavaScript

var numbers = [];
var min = 1;
var max = $("input").length;

$("input").attr('max', max);

$("input").numeric();

$("input").bind('blur', checkNumberSequance);

$("button").click(function(e){
    var allOk = true;
    $("input").each(function(index, item){
        if($(item).val() == '') allOk = false;
    });
    if(!allOk)
        e.preventDefault();
});

function fillArray() {
    $("input").each(function (index, item) {
        if ($(item).val() != "") numbers.push(parseInt($(item).val()));
    });
}
fillArray();

function checkNumberSequance(e) {
    var me = $(this);
    if (me.val() == '' || e.which == 9) return false;
    if (parseInt(me.val()) > max || parseInt(me.val()) < min) {
        me.val('');
    }
    for (var i = 0; i < numbers.length; i++) {
        if (numbers[i] == parseInt(me.val())) {
            var el = $("input[value='" + me.val() + "']");
            if (el.length > 0) {
                el.first().val('');
                el.first().attr('value', '');
            }
            break;
        }
    }
    me.attr('value', me.val());
    numbers = [];
    fillArray();
}