JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
 <span id="error_message" class="error_msge">
                        
                    </span> 
<div>&nbsp;</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="header">
                <div class="row">
                    <div class="col-xs-10 col-sm-11 col-md-11 pad-top"> <span class="info_txt">Health Information</span>

                    </div>
                    <div class="col-xs-2 col-sm-1 col-md-1"> <a id="expand" class="expand" href="#"><div id="ico" class="pull-right minus minus_pos1"></div></a>

                    </div>
                </div>
            </div>
            <div id="collapse" class="body toggle">
                <div class="container-fluid">
                    <!-- first row-fluid-->
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-12 emprad">
                            <label>Do you have any physical disabilities</label>
                            <input type="radio" class="phy_clp" id="phy_clp" value="yes" name="phy_clp" />Yes
                            <input type="radio" class="phy_clp" checked id="phy_clp" value="no" name="phy_clp" />No</div>
                    </div>
                    <!-- Second row-fluid-->
                    <div id="phyexpy" class="wrk_exp">
                        <div class="row">
                            <div class="col-xs-6 col-sm-3 col-md-2">
                                <input type="checkbox" class="chk_Field" id="chk_Vis" name="chk_Vis" />
     ...

CSS

.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
    padding: 6px !important;
}
.btn-next {
    width: 179px;
    height: 35px;
    background-color: #049f51;
    border-bottom: 2px solid #000;
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-radius: 0px;
    color: white;
    font-family: arial;
    font-size: 17px;
}
.errRed_chkb {
    color: black !important;
    outline-color: #EA373D;
    outline-style: solid;
    outline-width: thin;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.header {
    height: 30px;
    background-color: #049F51;
    color: white;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}
.cst_select_dis {
    background-color: #b9b9b9;
    color: #fff;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}
.custom-file-input {
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}
div.fileinputs {
    position: relative;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
.cst_select {
    color: #fff;
    background-color: #D3832C;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}

JavaScript

$(document).ready(function () {
    $('.error_msge').hide();
    $("#phyexpy").css("display", "none");
    $(".phy_clp").click(function () {
        if ($('input[name=phy_clp]:checked').val() == "yes") {
            $("#phyexpy").css("display", "block");
            // $(".phyexpy").slideDown("fast");
        }
        if ($('input[name=phy_clp]:checked').val() == "no") {
            //$(".phyexpy").slideUp("fast");
            $("#phyexpy").css("display", "none");
        }
    });
    var $preview = $(".preview");
    $preview.hide();
    $(".checkfile").on("change", function (e) {
        var filename = this.value;
        var files = this.files;
        var URL = window.URL || window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        var error = false;
        var myfile = $(this).val();
        var ext = myfile.split('.').pop();
        
        $(this).closest('.row').find('.preview').attr("href", url).show();
        $(this).next('.check').prop("disabled", true);
        
        if (ext == "pdf" || ext == "jpeg" || ext == "jpg") {
            $(this).next('.check').val(filename);
        } else {
            $(this).closest('.row').find('.preview').hide()
            error = true;
            alert('Invalid File Type')
            $(this).next('.check').val('');
            $(".checkfile").val('');
            e.preventDefault();
        }
        
        if (e.currentTarget.files[0].size >= 1024 * 1024 * 2) {
            error = true;
            alert('File Size cannot be more than 2 MB');
            $('.ctm_widt').val('');
            $('.custom-file-input').addClass("errRed");

            e.preventDefault();
            $(this).closest('.row').find('.preview').hide()
        } else {
            $('.custom-file-input').removeClass("errRed");
        }
        apply_validation(error);
    });

    function apply_validation(customErrors) {
        $(".educationForm").validate({
            ignore: "input[type='text']:hidden",
       ...