JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span class="datefields">
	<input type="text" class="datepicker"><button class="btn">
	Date 1
	</button>
</span>

<span class="datefields">
	<input type="text" class="datepicker"><button class="btn">
	Date 2
	</button>
</span>

<span class="datefields">
	<input type="text" class="datepicker"><button class="btn">
	Date 3
	</button>
</span>

CSS

.datefields .datepicker {
	display: none;
}

JavaScript

(function($){
	$('.datefields').each(function(){
		var self = $(this),
			date = $('.datepicker', self),
			btn = $('.btn', self);
		date.datepicker();
		btn.on('click', function(){
			date.show().datepicker('show').focus().hide();
		})
	})
	$(".datepicker").datepicker();
}(jQuery));