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.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<span id="error_message" class="error_msge">
        </span>
<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>Job Title</label>
      <br/>
      <input type="text" maxlength="50" class="chk_Field ipt_Field required_Field chk_Field_exp" id="txt_Jbt" name="txt_Jbt" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <label><span class="required-star-black">*</span>Employer</label>
      <br/>
      <input type="text" maxlength="50" class="chk_Field ipt_Field required_Field chk_Field_exp" id="txt_Empl" name="txt_Empl" />
    </div>
    <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" />
     ...

CSS

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

JavaScript

var rowCount = 1;
 $(document).on("click", ".exp_add_button", function() {
   var $clone = $('.cloned-row3:eq(0)').clone(true, true);
   var num = $('.cloned-row3').length;
   $clone.find(".chk_Field_exp").val('');
   $clone.find('[id]').each(function() {
     this.id += '_' + num;
	 console.log(this.id);
     $(this).removeClass("errRed");
     if ($(this).hasClass("required_Field")) {
       $(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
       $(this).addClass("cloned_field");
     } else {
       $(this).removeClass("errRed");
       $(this).removeClass("text-error-red");
     }
   });
   $clone.find('.btn_more').after("<input type='button' value='Remove' class='btn_less1 edu_btnle' id='buttonless" + (++rowCount) + "'/>")
   $clone.attr('id', "expy-" + (rowCount)).addClass('exp_add');
   $clone.find(".startDate").val('');
   $clone.find(".endDate").val('');
   /*$clone.find(".degree_Description").attr('disabled', true).val('');*/
   $clone.find(".startDate,.endDate")
     .removeClass('hasDatepicker')
     .removeData('datepicker')
     .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);
       }
     });

   $(this).parents('.wrk_exp').after($clone);
   $(".cloned-row3").each(function(i){
   		this.id = "expy-"+(i+1);
   });
 });
 $(document).on('click', ".btn_less1", function() {
   var len = $('.cloned-row3').length;
   if (len > 1) {
     $(this).closest(".btn_less1").closest(".cloned-row3").remove();
   }
   
   $(".cloned-row3").each(function(i){
   		this.id = "expy-"+(i+1);
   });
 });