JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dedicationfields">
                  <div class="form-group">
                  </div>
                  <div class="form-group"><div class="col-md-12">
				
	
                    <div class="col-md-6">
                      <label class="datetag"> תאריך מבוקש ללימוד: </label>
                      <input placeholder="עדיפות לתאריך עברי" name="requestedDate" value="" size="30" class="required form-control datepicker  " title=" " id="dp1529938300566" type="text">
                    </div>
</div>
                  </div>
                 
                
                </div>
                
                <div class="form-group" style="margin-top: 3px;">
					
                  <input name="triggerAdd" id="triggerAdd" class="btn btn-success" value="ADD A NEW SET" type="button">
                </div>

CSS

.dedicationfields {
	background: #e8e8e8;
	padding: 10px;
	border: 1px solid #999;
	overflow: auto;
	margin-bottom: 10px;
	border-radius: 6px;
}

JavaScript

//	$( ".datepicker" ).datepicker();
   
    $("#triggerAdd").click(function(){

       var $last   = $('.dedicationfields:last');
       var $clone  = $last.clone(false);
       $last.after($clone);
       $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');
       $clone.find('input.datepicker')
	  		.removeClass('hasDatepicker')
	  		.removeData('datepicker')
    		.attr('id', 'change_id' + Math.random())
	  		.unbind()
	  		.datepicker();
			});
      
     $(document).on('focus',".datepicker", function(){
    $(this).datepicker();
});