JSFiddle - React, Tailwind, and code Playground

by mcgrailm

HTML

<ul>
    <li class="Images test">
        <div>
            <input type="text" name="cnumber1" class="inputBx" style="width:58px;" maxlength="4" size="4"/>            
        </div>
        <span class="test">span</span>
    </li>
</ul>

CSS

.fullOpactiy{
    background-color:red;
}

JavaScript

var foo = [];
foo['xarr'] = ["23"];
foo['yarr'] = ["21", "21", "22", "23", "24"];
foo['zarr'] = ["70", "71", "72", "73", "74", "75"];



$('.inputBx').keyup(function() {
    var inputVal = this.value;
    iLen = inputVal.length;
    if (iLen >= 2) {
        if ($.inArray(inputVal, foo['xarr']) >= 0) {
            $('.Images, .test').addClass('fullOpactiy')
        }
        if ($.inArray(inputVal, foo['yarr']) >= 0) {
            $('.cardImages, .test').addClass('fullOpactiy')
        }
        if ($.inArray(inputVal, foo['zarr']) >= 0) {
            $('.Images, .test').addClass('fullOpactiy')
        }
    }
});