JSFiddle - React, Tailwind, and code Playground

HTML

<a id="menu-open" href="#">Click here!</a><br><br>
<div id="progressbar-progress">0%</div>

JavaScript

$(document).ready(function(){	
				var timeout = '';
			
				function checkProgress(){
					console.log('Checking progress event started');

					$.ajax({
						url: 'http://willetu54.fiftyfour.axc.nl/dgi/ajax.php?progress&time='+ new Date().getTime(),
						cache: false,
						dataType: 'json'
					}).done(function(data) {
						$('#progressbar-progress').html(data.progress_status +'('+ data.progress_percentage +')');
						
						console.log('Progress checked');
						console.log(data);
						
						if(data.progress_done == "1"){
							clearTimeout(timeout);
						}
					}).fail(function(jqXHR, status, error){
						console.log('Check Progress: Error: '+ error + status +'');
					});
					
				}
				
				function checkProgressTimeout(){
					checkProgress();
					console.log('Timeout tick for progress');
					
					timeout = setTimeout(checkProgressTimeout, 500);
				}
						
				$('#menu-open').click(function(event){
					console.log('starting dummy task');
					
					event.preventDefault();
					
					$.get('http://willetu54.fiftyfour.axc.nl/dgi/ajax.php?dummytask', function(data) {
						alert('Load was performed.');
					});
                    
                    checkProgressTimeout();
				});
            });