JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cca" class="leaf">
    <label class="control input text" title=""> <span class="wrap">cca</span>
        <input class="" type="text" value="[Null]" /> <span class="warning"></span>
    </label>
</div>
<div id="ccit" class="leaf">
    <label class="control input text" title=""> <span class="wrap">ccit</span>
        <input class="" type="text" value="[Null]" /> <span class="warning"></span>
    </label>
</div>
<div id="cit" class="leaf">
    <label class="control input text" title=""> <span class="wrap">cit</span>
        <input class="" type="text" value="[Null]" /> <span class="warning"></span>
    </label>
</div>
<div id="tan" class="leaf">
    <label class="control input text" title=""> <span class="wrap">tan</span>
        <input class="" type="text" value="[Null]" /> <span class="warning"></span>
    </label>
</div>

JavaScript

alert("hello");
    /*jQuery("#cca").on('change', 'label.control input', function (event) {*/
    jQuery("#cca").change(function () {
        var txtcca = document.querySelector('#cca label.control input ').value;
        alert('I am pretty sure the text box changed');
        if (txtcca != "") {
            alert("1");
            jQuery("#tan").find('label.control input').prop('disabled', true).css('background-    color', '#FF0033');
        }
        if (txtcca == "") {
            alert("2");
            jQuery("#tan").find('label.control input').prop('disabled', false);
        }
    });