SSE Requests stops when AJAX post is running - php

Question

In my project, I have a long-running process which is called by AJAX. Duration can be 1 to 15 mins.
While AJAX is running, I want to give updates to users. It just should show simply how many rows left to add into the database.
I found out that there are a few different options to realize this. Polling, SSE or WebSockets. I never worked with WebSockets, and I couldn't find a good example.
I'm trying now with SSE which I quite understand, and it is working properly.. but when the AJAX start running the connection to the eventSource will be pending. So while AJAX is running, there are no updates received.
Code:
<script type="text/javascript">
var es;
function checkProgress(id){
es = new EventSource('checkProgress.php');
es.addEventListener('message', function(e) {
console.log(e.data);
}, false);
}
checkProgress(1);
$(function() {
$('.submit').on('click', function() {
var form = $('form')[0];
var form_data = new FormData(form);
$.ajax({
type: 'POST',
url: 'submit.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
console.log(response);
}
});
return false;
});
});
</script>
Screenshots:
Network log
Now actually I still didn't find any reference or example of how to implement SSE while there is an AJAX process running. All reference or examples give examples to let the getProgress file to do something.
PHP:
checkProgress.php
<?php
require_once './core/init.php';
$Jobs = new Core\Jobs();
$data = $Jobs->getUpdate(1);
// var_dump($data);
// die();
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
echo "id: 1" . PHP_EOL;
echo "retry: 100\n\n";
echo "data: " . json_encode($data) . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
Submit.php
<?php
require_once 'core/init.php';
//'long running' job for debug
for($i = 1; $i <= 10; $i++) {
Core\Jobs::pushUpdate('1', array("rows"=>$i,"job_id"=>1));
sleep(2);
}