JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="wrapppp">
    <div class="wrap">
        <input type="text" />
        <br />
        <input type="text" />
        <br />
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
</div>
<br />
<div class="wrapppp">
    <div class="wrap">
        <input type="text" />
        <br />
        <input type="checkbox" name="" id="" />
        <input type="text" />
        <br />
        <input type="text" />
        <br />
 
        <input type="text" />
        <br />
        <input type="checkbox" name="" id="" />
        <input type="text" />
        <br />
        <input type="text" />
        <br />
    </div>
    <div class="wrap">
        <input type="checkbox" name="" id="" />
    </div>
</div>

CSS

.green{ background-color:green; }

JavaScript

$('input').each(function () { check($(this)); });

 $('textarea').each(function () { check($(this)); });

 function check($toCheck) {
     $toCheck.change(function () {
         var missingVal = false;
         $toCheck.siblings().each(function () {
             if ($(this).context.nodeName == "INPUT") {
                 if (!$(this).val()) {
                     missingVal = true;
                 }
             }
         })
         if ($(this).is(':checkbox')) {
             if (!$(this).is(':checked')) {
                 missingVal = true;
             }
         } else {
             if (!$(this).val()) {
                 missingVal = true;
             }
         }
         if (missingVal) {
             $(this).closest('.wrapppp').removeClass('green');
         } else {
             $(this).closest('.wrapppp').addClass('green');
         }
     });
 }