JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div>
    <input id="client-qty" type="text" value="1" />
    <input id="totes-qty" type="text" value="10" />
    <div id="error">I'm sorry, there are only <span id="totes-qty-output"></span> in stock!</div>
</div>

CSS

div#error{
    display:none;
    color:red;
}
div.error div#error{
    display:block;
}

JavaScript

$(document).ready(function(){
    $("#client-qty").keyup(function(){
        var clientQty = parseInt($(this).val()),
            totesQty = parseInt($('#totes-qty').val());
        
        if(clientQty > totesQty){
            $(this).parent('div').addClass('error');
        } else{
            $(this).parent('div').removeClass('error');
        }

        console.log(clientQty);
        console.log(totesQty);
    });
})