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>
<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" 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" 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 startDate datepicker" 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="ipt_Field endDate datepicker" 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 pull-right clear">
      <input type="button" value="add" class="btn_more btn_right expbtnmore exp_add_button" />
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
      var diffDays = 0,
          count = 0;
      $(".cloned-row3").find(".datepicker").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);
        }

      });
      $(document).on("click", ".exp_add_button", function() {
        var $clone = $('.cloned-row3:eq(0)').clone(true, true);
        $clone.find('[id]').each(function() {
          this.id += 'someotherpart'
        });
        $clone.find('.btn_more').after("<input type='button' value='Delete' class='btn_less1 selbtnless' id='buttonless'/>")
        $clone.attr('id', 'expy-' + (++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);
            }
          });
        $clone.find("input.endDate")
          .removeClass('hasDatepicker')
          .removeData('datepicker')
          .unbind()
          .datepicker({
            dateFormat: "mm/dd/yy",
            changeMonth: true,
            yearRange: "-100:+0",
            changeYear: true,
            maxDate: new Date(),
            showButtonPanel: false,
            beforeShow:...