JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<span id="error_message" class="error_msge">
                
     </span>

<!-- Start your code here -->
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="attchment_declaration.html">
    <!--Educational Information-->
    <div class="container-fluid" id="edu_info">
        <div class="row-fluid">
            <div class="header">
                <div class="row">
                    <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11 pad-top"> <span class="info_txt">Educational Information</span>
 <a class="help atooltip edu_help_icn"><i class="fa fa-question-circle help_icon"></i></a>

                        <!-- Educational Table Help Pop up -->
                        <div class="cstmtooltip ctnedu ctneduinfo">
                             <h2 class="headborder">Educational Info</h2>

                            <p class="bodytip">
                                <ul>
                                    <li class="licustm" style="margin-top: -30px;">Provide your educational details. At least one row is mandatory</li>
                                    <li class="licustm">In case your school code or degree is not available then choose 'Other'.</li>
                                    <li class="licustm">If you do not have the Degree date then provide today's date as the degree...

CSS

.header {
    height: 30px;
    background-color: #049F51;
    color: white;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}
.body {
    background-color: #f9f9f9;
    height: auto;
}
.cstmtooltip {
    width:300px;
    height:auto;
    background-color: WHITE;
    border: 1px solid #a2a2a2;
    padding:5px;
    position: absolute;
    top: 20px;
    color: black;
}
.headborder {
    border-bottom:1px solid #a2a2a2;
    font-size: 17px;
    margin-bottom: 18px;
    margin-top: 3px;
    text-align: center;
    color: black;
}
.bodytip {
    font-size: 14px;
    margin-top: -15px;
    white-space: pre-line;
}
.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px dotted #EA373D !important;
    padding: 6px !important;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.plus:before {
    content:"\f196";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    float: right;
    padding-right: 15px;
    text-decoration: none;
}
.minus:before {
    content:"\f147";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    padding-right: 15px;
    float: right;
    text-decoration: none;
}
.minus_pos {
    left: 75px;
    position: absolute;
    top: 0;
}
.hide {
    displa
}
}

JavaScript

$(document).ready(function () {
    $('.error_msge').hide();
    apply_validation();
    /*expand collapse start here*/
    $(".expand").click(function () {
        var state = $(this).children("div").hasClass("minus");
        if (state == true) {
            $(this).children("div").addClass("plus");
            $(this).children("div").removeClass("minus");
        } else {
            $(this).children("div").removeClass("plus");
            $(this).children("div").addClass("minus");
        }
        $(this).parents(".header").next(".body").toggle();
    });
    /*expand collapse ends here*/
    var currentDate = new Date();
    $(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
        dateFormat: "mm-dd-yy",
        changeMonth: true,
        yearRange: "-100:+0",
        changeYear: true,
        maxDate: new Date(),
        showButtonPanel: false,
        beforeShow: function () {
            setTimeout(function () {
                $('.ui-datepicker').css('z-index', 99999999999999);

            }, 0);
        }
    });
    $(".deg_date").datepicker("setDate", currentDate);
    $(".cstmtooltip").hide();
    $(".help").on({
        mouseenter: function (e) {
            var cstmtooltip = $(this).next();
            //alert("check"+ cstmtooltip);
            cstmtooltip.show();
            // cstmtooltip.css('left',80);
            cstmtooltip.css('z-index', 10);
        },
        mouseleave: function () {
            $(this).next().hide();
        }
    });
});
var count = 0;
$(document).on("click", ".edu_add_button", function () {
    var $clone = $('.cloned-row1:eq(0)').clone(true, true);
    var num = $('.cloned-row1').length;
    $clone.find('[id]').each(function () {
        this.id += '_' + parseInt(num) + 1;
        this.name += '_' + parseInt(num) + 1;
        $(this).val("");
        $(this).removeClass("errRed");
        if ($(this).hasClass("required_field")) {
            $(this).addClass("cloned_field");
           ...