JSFiddle - React, Tailwind, and code Playground

by wkerswell

HTML

<div id="pax-selector">
                            <div class="col span_1_of_3" id="adultStepper">
                                <div data-type="adult" class="up pax-stepper"><i class="fa fa-plus"></i></div>
                                <div class="people-select">
                                    <input type="text" id="inputAdults" value="1" class="intInput" title="Number of adults" disabled="disabled"/>
                                    <label for="inputAdults">Adults</label>
                                </div>
                                <div data-type="adult" class="down pax-stepper"><i class="fa fa-minus"></i></div>
                            </div>
                            <div class="col span_1_of_3" id="childStepper" >
                                <div data-type="child" class="up pax-stepper"><i class="fa fa-plus"></i></div>
                                <div class="people-select">
                                    <input type="text" id="inputChildren" value="0" class="intInput" title="Number of children" disabled="disabled"/>
                                    <label for="inputChildren">Children <!-- (2-12) --></label>
                                </div>
                                <div data-type="child" class="down pax-stepper disabled"><i class="fa fa-minus"></i></div>
                            </div>
                            <div class="col span_1_of_3" id="infantsStepper">
                                <div data-type="infant" class="up pax-stepper"><i class="fa fa-plus"></i></div>
                                <div class="people-select">
                                    <input type="text" id="inputInfants" value="0" class="intInput" title="Number of infants" disabled="disabled"/>
                                    <label for="inputInfants">Infants <!-- (0-2) --></label>
                                </div>
                                <div data-type="infant" class="down pax-stepper disabled"><i...

CSS

#pax-container{
    background-color: #fff;
    color:#000;
    margin-top: 30px;
    margin-bottom: 30px;
    font-family: 'Conv_GothamRnd-Book';
    font-weight:normal; 
    height: 200px;
}

#pax-container label{
    color: #000;
    cursor: initial;
}

#pax-container input {
     font-weight: initial; 
}

#pax-display{
    float: left;
    border-bottom: 1px #ccc dashed;
    display: inline;
    padding: 5px 10px 5px 10px;
    margin-left: 5px;
    margin-top: 10px;
    cursor: pointer;
    cursor: hand;
}

#pax-selector{
    /*display: none;*/
}

#pax-container .hover {
    display: block;
}

.pax-stepper {
    text-align: center;
    background-color: #DADADA;
    cursor: pointer;
    cursor: hand;
}
.pax-stepper:active,
#pax-selector > .col > .disabled {
    background-color: #EDEDED ;
}
.people-select{
    font-size: ;
}

JavaScript

$.fn.numericStepper = function(options) {
        var textField   = $('input',this);
        var upButton    = $('.up', this);
        var downButton  = $('.down', this);
        var defaults    = {
            value: 1,
            max: 8,
            min: 0
        };

        var options     = $.extend(defaults, options);
        
        textField.val(options.value);
        
        upButton.mousedown(function() {
            downButton.removeClass('disabled');
            if (options.value != options.max)
            {
                options.value++
                textField.val(options.value);

                if (options.value == options.max)
                    $(this).addClass('disabled')

            }else if (options.value == options.max)
            {
                alert("Stop! too many people!!!!");
            }
        });
        downButton.mousedown(function() {
            upButton.removeClass('disabled');
            if (options.value != options.min)
            {
                options.value--
                textField.val(options.value);

                if (options.value == options.min)
                    $(this).addClass('disabled')
            }else if (options.value == options.max)
            {
                alert("Can have less than zero people");
            }
        });
    };


$('#adultStepper').numericStepper({value:adults, max:8, min:0});
$('#childStepper').numericStepper({value:children, max:8, min:0});
$('#infantsStepper').numericStepper({value:infants, max:8, min:0});