Why on changing radio buttons it will showing the html of a particular div?

In the below snippet div don't displaying its html on changing the radio button what should be the error. Can anyone please solve this. Why it is doing like that see there a two radio buttons on click of each it will display there html you can see in the html part too in the code.

$(document).ready(function(){
		$('.specificProvider').hide();
		$('.fromDate').hide();
		var counter = 0;
		var value_field;
		$('input:radio[name=selectRadio]').change(function() {
	    	if (this.value == 'Specific Provider') {
				$('.specificProvider').show();
				$('.fromDate').hide();
				var counter = 0;
				var value_field;
				$('#specific_start_Date').hide();
				$('#working-spots').hide();
				$('#heading').hide();
				var provider =[];
				// searching the provider while user entering the data in the field
				$("#provider_field").keyup(function(){
					$('#specific_start_Date').hide();
					$('#working-spots').hide();
					$('#heading').hide();
					value_field = $('#provider_field').val();
					$.ajax({
						url:"/api/v1/provider",
						type: "GET",
						dataType: 'json',
						async: false,
						success: function(response){
							console.log(response.response)
							provider = [];
							if (response.response.data == null) {
								
							}else{
								for (var i = 0; i < response.response.data.length; i++) {
									if (response.response.data[i].provider === value_field){
										provider.push({
											id : response.response.data[i]._id,
											provider_name : response.response.data[i].provider,
										});
										// $('#search').append("<option value = "+response.response.data[i]._id+">"+response.response.data[i].provider+"</option>");
									}
								}
							}
						}
					});
					if (provider.length != 0) {
						counter = 1;
						for (var i = 0; i < provider.length; i++) {
							console.log(provider[i].provider_name);
							$('#search').append("<option value = "+provider[i].id+">"+provider[i].provider_name+"</option>");
						}
					}else{
						counter = 0;
						$('#search').html("<option>Select the Provider here</option>");
					}
					// console.log(provider)
					// console.log(counter)
				}); 
				var providertimings = [];
				// when user click on the search button it check the counter value if it true then it will show the datepicker and the time option
				$('#search').on('change', function (e) {
					// console.log("body clicked");
					console.log(counter);
					// e.preventDefault();
					// console.log(counter);
					if (counter === 1) {
						console.log("matches");
						$('#specific_start_Date').show();
						$('#working-spots').show();
						$('#heading').show();
						$( "#specific_start_Date" ).datepicker({
							onClose: function(){
								validate($(this).val());
							}
						});
					}
					else{
						console.log("not matcher");
						$('#specific_start_Date').hide();
						$('#working-spots').hide();
						$('#heading').hide();
					}	
				});
				$('#error2').hide();
				var result_time = [];
				function validate(datetext){
					$('#working-spots').empty();
					var selected_time_stamp = new Date(datetext).getTime();
					selected_time_stamp = (selected_time_stamp / 1000) + 19800;
					providertimings = [];	
					$.ajax({
						url:"/api/v1/providertime",
						type: "GET",
						dataType: 'json',
						data:{selectedProvider: value_field},//textSelected},
						async: false,
						success: function(response){
							console.log(response)
							for (var i = response.response.total_record.length - 1; i >= 0; i--) {
								console.log(response.response.total_record[i]);
								for (var j = 0; j < response.response.total_record[i].time.length; j++) {
									if(Weekdays(datetext) == response.response.total_record[i].time[j].day && selected_time_stamp == response.response.total_record[i].time[j].start_date && response.response.total_record[i].time[j].status == "0"){
										console.log(selected_time_stamp);
									console.log(response.response.total_record[i].time[j].start_date)
										$('#timeID').val(response.response.total_record[i].time[j]._id);
										providertimings.push({ 
											start_time : response.response.total_record[i].time[j].start_time+19800, 
											end_time: response.response.total_record[i].time[j].end_time+19800,
										}); 
									}
								}
							}
						}
					});
					var array1 = [];
					$.ajax({
						url:"/api/v1/workingspots",
						type: "GET",
						dataType: 'json',
						async: false,
						success: function(response){
							result_time = [];
							for (var i = 0; i < response.response.data.length; i++) {
								array1.push({ 
									start_time : response.response.data[i].start_time+19800, 
									end_time: response.response.data[i].end_time+19800,
								});  
							}
							providertimings = $.unique(providertimings);
							var res = providertimings.sort(function(a, b) {
							return a.start_time > b.start_time
							});
							var res = array1.sort(function(a, b) {
							return a.start_time > b.start_time
							});
							// console.log(array1)
							console.log(providertimings)
							console.log(array1)
							for (var j = 0; j < providertimings.length; j++) {
								for (var i = 0; i < array1.length; i++) {
									if ((providertimings[j].start_time == array1[i].start_time && providertimings[j].end_time == array1[i].end_time) || (providertimings[j].start_time <= array1[i].start_time && providertimings[j].end_time >= array1[i].end_time)) {
										result_time.push({
											start_time  :  array1[i].start_time,
											end_time    :  array1[i].end_time,
										});
										// alert(array1[i].end_time);
										// var t = new Date();
										// var start_date = new Date(array1[i].start_time*1000);
										// var start_hours = start_date.getHours();
										// var start_minutes = start_date.getMinutes();
										// var start_ampm = start_hours >= 12 ? 'PM' : 'AM';
										// start_hours = start_hours % 12;
										// start_hours = start_hours ? start_hours : 12; // the hour '0' should be '12'
										// start_minutes = start_minutes < 10 ? '0'+start_minutes : start_minutes;
										// var start_strTime = start_hours + ':' + start_minutes + ' ' + start_ampm;
										// var end_date = new Date(array1[i].end_time*1000);
										// var end_hours = end_date.getHours();
										// var end_minutes = end_date.getMinutes();
										// var end_ampm = end_hours >= 12 ? 'PM' : 'AM';
										// end_hours = end_hours % 12;
										// end_hours = end_hours ? end_hours : 12; // the hour '0' should be '12'
										// end_minutes = end_minutes < 10 ? '0'+end_minutes : end_minutes;
										// var end_strTime = end_hours + ':' + end_minutes + ' ' + end_ampm;
										// $('#working-spots').append("<option value = "+i+">"+array1[i].start_time+" - "+array1[i].end_time+"</option>")
									}
								}
							}
						}
					});
					result_time  = $.unique(result_time);
					if (result_time.length != 0) {
						for (var i = 0; i < result_time.length; i++) {
							$('#working-spots').append("<option value = "+i+">"+convertTime24to12(secondsTimeSpanToHMS(result_time[i].start_time))+" - "+convertTime24to12(secondsTimeSpanToHMS(result_time[i].end_time))+"</option>");
						}
					}else{
						$('#working-spots').append("<option></option>");
					}
				}
				// var timeSelect = $('#working-spots option:selected').val();
				// this event will save the booking
				$('#saveBooking').on('click', function(e){
					e.preventDefault();
					var dateField = $('#specific_start_Date').val();
					$('#specific_start_Date').on('change',function(e){
						dateField = $(this).val();
						validate();
					});
		// console.log(timeSelect);
					var providerField = $('#provider_field').val();
					if (providerField == "") {
						$('#error1').append("<span style ='color:red;'>*Please Fill This Field</span>");
					}else if(dateField == ""){
						$('#error2').show();
						$('#error2').append("<span style ='color:red;'>*Please Fill Date Field</span>");
					}//else if( timeSelect = " "){
					// 	$('#error3').append("<span style ='color:red;'>*Please Fill Time Field</span>");
					// }
					id = $('#timeID').val();
					$.ajax({
						url:"/api/v1/booking",
						type: "POST",
						dataType: 'json',
						data:{selectedProvider: providerField, ID:id},//textSelected},
						async: false,
						success:function(response){
							console.log(response);
						}
					});
				});
			}
			else if(this.value == 'Random Date'){
				console.log("hello");
				$('.fromDate').show();
				$('.specificProvider').hide();
				$( "#specific_start_Date" ).datepicker({
					dateFormat: 'mm-dd-yy',
					onClose: function(){
						$("#checkboxes").empty()
						validate($(this).val());
					}
				});
				var bookingSpots = [];
				var reduced_time = [];
				function validate(datetext){
					var selected_time_stamp = new Date(datetext).getTime();
					selected_time_stamp = (selected_time_stamp / 1000) + 19800;
					ajax(datetext);
					ajax1(datetext);
				}
				function ajax(datetext){
					bookingSpots = [];
					$.ajax({
						url: "/api/v1/workingspots",
						type: "GET",
						dataType: "json",
						async: false,
						success: function(response){
							console.log(response);
							if (response.response.data != null) {
								for (var i = 0; i < response.response.data.length; i++) {
									// console.log(Weekdays(datetext) == response.response.data[i].day);
									if(Weekdays(datetext) == response.response.data[i].day){
										bookingSpots.push({
											start_time:response.response.data[i].start_time+19800,
											end_time :response.response.data[i].end_time+19800,
										});
									}else{
										
									}
								}
							}
						}
					});
				}
				var providers_time = [];
				function ajax1(datetext){
					providers_time = [];
					$.ajax({
						url: "/api/v1/allschedule",
						type: "GET",
						dataType: "json",
						data:{day:Weekdays(datetext)},
						async: false,
						success: function(response){
							$('#working-spots').empty();
							console.log(response);
							if (response.response.data != null) {
								for (var i = 0; i < response.response.data.length; i++) {
									var ret = response.response.data[i].split(" ");
									if(Weekdays(datetext) == ret[1] && datetext == ret[2]){
										providers_time.push({
											id : ret[0],
											start_time:parsehhmmsst(ret[3]),
											end_time :parsehhmmsst(ret[4]),
										});
									}else{
										
									}
								}
							}
						}
					});
					if (providers_time.length == 0) {
					
					}else{
						reduced_time = providers_time.reduce((a, {id, start_time, end_time }) => ({
							id : a.id+","+id,
							start_time: Math.min(a.start_time, start_time),
							end_time: Math.max(a.end_time, end_time),
						}));
					}
					console.log(reduced_time);
					$('#working-spots').append("<option>Select the Provider here</option>");
					for (var j = 0; j < bookingSpots.length; j++) {
						if(bookingSpots[j].start_time >= reduced_time.start_time && bookingSpots[j].end_time <= reduced_time.end_time){ 
							$('#working-spots').append("<option id="+reduced_time.id+">"+convertTime24to12(secondsTimeSpanToHMS(bookingSpots[j].start_time))+"-"+convertTime24to12(secondsTimeSpanToHMS(bookingSpots[j].end_time))+"</option>");
						}
					}
				}
				$("#working-spots").on('change', function(){
					var ids = $('option:selected', this).attr('id');
					$("#checkboxes").empty()
					$.ajax({
						url:"/api/v1/testbooking?id="+ids,
						type:"GET",
						datatype:"json",
						success:function(response){
							console.log("helllo");
							console.log(response);
							for (var i = 0; i < response.response.data.length; i++) {
								// console.log(response.response.data[i].provider)
								// for(var j = 0; j < response.response.total_record[i].length; j++){
									$("#checkboxes").append("<label><input type='checkbox' id = "+response.response.data[i]._id+">"+response.response.data[i].provider+"</label><br>");
								// }
							}
						}
					});
				});
			}
		});
		
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="radioButton">
		<label><input type="radio" name="selectRadio" id="sepecificProvider" value="Specific Provider">Specific Provider</label>
		<label><input type="radio" name="selectRadio" id="randomDate" value="Random Date">Random Date</label>
	</div>
	<div class="specificProvider">
		<div class = "select-provider-div" id = "select-provider-div">
			<h3>Select your Provider</h3>
			<input type="text" name="provider_field" id="provider_field" value="" placeholder="Enter the Provider name">
			<div class="space" style="margin-bottom: 10px;"></div>
			<div id="error1"></div>
			<select id= "search">
			<option>Select the Provider here</option>
			</select>
			<!-- <select class = "provider-select" id = "provider-select">
				<option>Select the Providers</option>
			</select> -->
		</div>
	</div>
	<div class="fromDate">
		<div class= "avaliable-working-spots" >
			<h3 id="heading">Avaliable Working Spots</h3>
			<input type="text" id="specific_start_Date" value="" />
			<div id="error2"></div>
			<select class = "working-spots" id = "working-spots">
				<option>Select the working Hours</option>
			</select>
			<div id="error3"></div>
			<input type="hidden" name="Id" id="timeID" value="">
			<div id="checkboxes"></div>
		</div>
	</div>

Thank you for the help.