JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popup-create-rule-content" style="max-height: 496.2px; overflow-y: auto; height: 496.2px; cursor: default;">
            <div class="RE-Create-Rule">
                <div class="RE-popup-label">1) Rule Name</div>
                <input id="RE-rule-name">
                <input type="hidden" id="RE-rule-id">
                <input type="hidden" id="RE-rule-order">
                <input type="hidden" value="1" id="RE-rule-status">
                <div class="RE-popup-label"><span id="bi-require-label">2) Event That Triggers This Rule</span></div>
                <div id="bi-required-ignore">
                <select class="RE-trigger" id="RE-trigger">
                    <option value="DEFAULT">Select...</option>
                    <option value="59AC3FFD-7C1E-4BE4-8B46-AA3D068B7F7C">Comment Submitted</option><option value="F7F3A005-CC79-42E6-978A-6ADF3EEBA3A7">Idea Status Changed</option><option value="F9D5E5F4-BC09-478B-BE80-CB4A6D4BC685">Idea Submitted</option><option value="53BD0B70-6574-4F23-8FAF-EF2654242F98">Idea Updated</option><option value="F86A4CEE-C979-428D-8413-9491FBE99648">Vote Submitted</option>                </select></div>
                <div class="RE-popup-label"><span id="bi-require-label">3) Meet the Following Conditions</span></div>
                <div class="RE-condition-wrapper">
                    <div class="condition" id="RE-condition-1" style="padding-top: 0px;">
                        <select class="RE-attribute" id="RE-attribute-1">
                            <option value="DEFAULT">Select...</option>
                            <option value="6C4A2001-9090-4E4C-B05F-FE4306C85A57" condition_type="1">Category</option><option value="50503FDF-67F8-4A3C-A312-BD048C2CD983" condition_type="0">Comment Count</option><option value="42CB880E-FFC9-499F-B846-98798E1978C0" condition_type="0">Score</option><option value="C912BD78-375C-4700-90DD-F427466F0D03" condition_type="1">Status</option><option...

JavaScript

var popupClass = '.RE-Create-Rule';
$('.green_btn_center').bind('click', function(){
    var success = validate(popupClass);
    if (success == true){
       console.log('success'); 
    } 
});
            function validate(popupClass) {

                var inputValidate = true;
                var selectValidate = true;
                var divValidate = true;
                var validate = true;
                
                if ($('.bi-required').length) {
                    $(popupClass + ' .bi-required').each(function(i) {
                    //Add validation to change handler
    
                    $(this).change(function() {
                            //Basic form validation
                        if ($(this).find('input').val() == '') {
                            inputValidate = false;
                            $(this).find('input').css('border', '1px solid red');
                            $(this).parents().siblings('.bi-form-label').css('color', 'red');
                        } else if ($(this).find('select').val() == 'DEFAULT') {
                            selectValidate = false;
                            $(this).find('select').css('border', '1px solid red');
                            $(this).parents().siblings('.bi-form-label').css('color', 'red');
                        } else if ($(this).find('select').val() == 'SSC_DEFAULT') {
                            selectValidate = false;                          
                            $(this).find('select').css('border', '1px solid red');
                            $(this).parents().siblings('.bi-form-label').css('color', 'red');
                        } else {
                            //$(this).find('div').css('border', '1px solid #B5B8C8');
                            $(this).find('select').css('border', '1px solid #B5B8C8');
                            $(this).find('input').css('border', '1px solid #B5B8C8');
                           ...