JSFiddle - React, Tailwind, and code Playground

by kneidels

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 dedicationfields = $(".dedicationfields:first").clone(true).insertAfter(".dedicationfields:last");
				
				//now empty fields:
				$(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');	
				//$(".dedicationfields:last .datepicker" ).datepicker( $.datepicker.regional[ "he" ]);
        $(".dedicationfields:last .datepicker" ).removeClass('hasDatepicker'); // added the removeClass part.
            
			});
      
			$(document).on('focus',".datepicker", function(){
				$(this).datepicker();
			});