JSFiddle - React, Tailwind, and code Playground
HTML
<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/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="">
<span id="error_message" class="error_msge"></span>
<div class="col-xs-12 col-sm-6 col-md-6">
<label>Total work experience</label>
<label class="years_lab" id="txt_expy">Years</label>
<label class="years_lab" id="txt_expm">Months</label>
</div>
<div id="expy" class="wrk_exp cloned-row3">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>Job Title</label>
<br/>
<input type="text" class="ipt_Field txt_Jbt required_field " id="txt_Jbt" name="txt_Jbt" />
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>Employer</label>
<br/>
<input type="text" class="ipt_Field txt_Empl required_field" 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="ipt_Field txt_Fdob datepicker startDate 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"...
CSS
.error_msge {
border:1px solid red;
width: 450px;
margin: 0px auto;
text-align: center;
background-color: #FFBABA!important;
padding: 5px;
}
JavaScript
$(document).ready(function () {
$('.error_msge').hide();
apply_validation();
$(document).on("click", ".exp_add_button", function () {
var $clone = $('.cloned-row3:eq(0)').clone(true, true);
var num = $('.cloned-row3').length;
$clone.find('[id]').each(function () {
this.id += '_' + parseInt(num)+1;
this.name += '_'+ parseInt(num)+1;
$(this).val("");
if($(this).hasClass("required_field"))
{
$(this).removeClass("required_field");
$(this).addClass("cloned_field");
}
});
$clone.find('.btn_more').after("<input type='button' value='remove' class='btn_less1 selbtnless' id='buttonless'/>")
$clone.attr('id', "added" + (++count));
$clone.find(".startDate").val('');
$clone.find(".endDate").val('');
/*$clone.find(".degree_Description").attr('disabled', true).val('');*/
$clone.find("input.startDate")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.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);
}
});
...