JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<div class="row-fluid">
  <div class="col-xs-12 col-sm-12 col-md-12 cnt">
    <span id="error_message" class="error_msge">
        </span>
  </div>
</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
  <div class="container-fluid cloned-row1 cloned_div educat_info" id="education-row1">
    <!-- first row-->
    <div class="row">
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
        <span class="required-star">*</span>
        <label>School Name </label>
        <br/>
        <div class="input-group">
          <input type="text" id="txt_schName" name="txt_schName" class="ipt_Field required_Field txt_schName " />
          <p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 checking_sol">
        <label>School Description</label>
        <br>
        <input type="text" maxlength="30" class="ipt_Field school_Name" name="school_Name" id="school_Name" disabled/>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 hsc_fid">
        <label><span class="required-star">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" maxlength="10" class="ipt_Field ipt_Havg required_Field" id="ipt_Havg" name="ipt_Havg" />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3"></div>
    </div>
    <!-- Second row-fluid-->
    <div class="row">
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 deg_fid">
        <label><span class="required-star">*</span>Degree</label>
        <br/>
        <select class="slt_Field txt_degreName...

CSS

.error_message {
  background-color: #f08080;
  color: #fff;
  border: 1px solid red;
  text-align: center
}

.errRed {
  color: #000!important;
  border: 0!important;
  padding: 6px!important;
  outline: 1px solid #EA373D!important
}

JavaScript

var count = 1;
var $errorMessageDiv = $("#error_message");
$errorMessageDiv.hide();
$('.error_msge').hide();
apply_validation();
$(document).on("click", ".edu_add_button", function() {
  var $clone = $('.cloned-row1:eq(0)').clone();
  var num = $('.cloned-row1').length;
  $clone.find('[id]').each(function() {
    this.id += '_' + num;
    this.name += '_' + num;
    $clone.addClass("check");
    $(this).removeClass("errRed");
    $(this).removeClass("required_Field");
  });
  $clone.find('.btn_more').after("<input type='button' class='btn_less1 edu_btnle' id='buttonless'/>");
  $clone.attr('id', "education-row" + (++count));
  $clone.find(".txt_schName").attr('id', 'txt_schName_' + count);
  $clone.find(".txt_schName").val("");
  $clone.find(".degree_Description").attr('disabled', true).val('');
  $clone.find(".ipt_Havg").val('');
  $clone.find(".txt_schName,.degree_Description,.ipt_Havg").addClass("cloned_field");
  $(this).parents('.educat_info').after($clone);
  $(".cloned-row1").each(function(i) {
    this.id = "education-row" + (i + 1);
  });
  add_validation_for_forms();
  additionalvalidation();
});

function apply_validation() {
  $(".educationForm").validate({
    ignore: ".chk_Field,input[type='checkbox']:hidden",
    onkeyup: false,
    showErrors: function(errorMap, errorList) {
      var errors = this.numberOfInvalids();

      var totalCheckboxes = 0;
      var phy_clpcheck = $('input[name=phy_clp]:checked').val();

      var atLeastOneIsChecked = $('input[name="chk_1"]:checked').length;

      if (phy_clpcheck == 'yes') {
        totalCheckboxes = $('input[name="chk_1"]:checkbox').length - 1;
      }

      if (atLeastOneIsChecked != 0) {
        totalCheckboxes = 0;
      }
      if (errors) {
        errors += totalCheckboxes;
        var message = errors === 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill the highlighted field before submit.';
        $("#error_message").html(message);
    ...