JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<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>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
    <label>Total work experience</label>
    <label class="years_lab" id="txt_expy"><span></span></label> Years
    <label class="years_lab" id="txt_expm"><span></span></label> Months
  </div>
</div>
<div id="expy-1" class="wrk_exp cloned-row3">
  <div class="row">
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <label><span class="required-star-black">*</span>From Date</label>
      <br/>
      <div class="input-group">
        <input type="text" placeholder="MM/DD/YYYY" class="chk_Field chk_Field_exp ipt_Field startDate datepicker required_Field" id="txt_Fdob" name="txt_Fdob" />
        <p class="form-control-feedback"><i class="fa fa-calendar  custom-mar"></i></p>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <label><span class="required-star-black">*</span>To Date</label>
      <br/>
      <div class="input-group">
        <input type="text" placeholder="MM/DD/YYYY" class="chk_Field chk_Field_exp ipt_Field endDate datepicker required_Field" id="txt_Tdob" name="txt_Tdob" />
        <p class="form-control-feedback"><i class="fa fa-calendar custom-mar"></i></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <input type="button" value="Add Row" class="btn_more btn_right expbtnmore exp_add_button" />
    </div>
  </div>
</div>

CSS

.ipt_Field {
  border: 1px solid #aeaeae;
  width: 240px;
  padding: 5px
}

JavaScript

$(function() {
  var diffDays = 0;
  $.datepicker.setDefaults({
    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);
    }

  });

  var valid = true;

  function uppdiff(event) {
    if (valid) {
      var dateStart = [];
      var dateEnd = [];
      $.each($('.datepicker'), function() {
        if ($(this).hasClass('startDate'))
          dateStart.push($(this).datepicker('getDate'))
        else
          dateEnd.push($(this).datepicker('getDate'))
      });
      diffDays = 0;
      // console.log(dateStart);
      $.each($('.wrk_exp'), function(key, value) {
        // console.log("Start Date: ", dateStart[key]);
        // console.log("Start End: ", dateEnd[key]);
        if (($(".startDate", this).val() != "") && ($(".endDate", this).val() != "")) {
          var x = $(".startDate", this).val().split("/");
          var y = $(".endDate", this).val().split("/");
          /*var chkfromDate = $(".endDate",$(this).prev()).val();
          console.log("previous to date",chkfromDate);*/
          var failed = false;
          var fromdate = new Date(x[2], x[0] - 1, x[1]);
          var todate = new Date(y[2], y[0] - 1, y[1]);
          var locDiffDays = parseInt((todate.getTime() - fromdate.getTime()) / (1000 * 60 * 60 * 24));
          if (locDiffDays < 0) {
            alert("To date " + $(".endDate", this).val() + " should be greater then from date " + $(".startDate", this).val());
            valid = false;
            //return valid;
          }
          if (dateStart[key - 1] !== undefined) {
            var x1 = $(".startDate", this).val().split("/");
            var y1 = $(".endDate", this).val().split("/");

            var fromdate1 = new Date(x1[2], x1[0] - 1, x1[1]);
            var todate1 = new Date(y1[2], y1[0] - 1,...