I am stuck in this problem, about making realtime progressbar on php (without php pusher)

Let's say I have 10 rows of data, that will be inserted to database.

Now how to send the progressbar data, while also inserting to database.

I will really appreciate your answers. Thanks.

Bellow is my code example:

// script.js (client)
// This function executed when user submit form
function store() {
  // Listen Server Side Event
  let event = new EventSource('controller/store')
  
  event.addEventListener('message', response => {
    // Then update progressbar
    updateProgressbar(response.percent)
  })
  
  // Ajax to save data to database
  $.ajax({
    url: baseUrl + 'controller/store',
    type: 'POST',
    dataType: 'JSON',
    data: $('#form').serializeArray(),
    success: function(response) {
      console.log(response)
    }
  })
}


// Controller.php (server)
public function store() {
  header("Content-Type: text/event-stream");
  header("Cache-Control: no-cache");
  header("Connection: keep-alive");
  
  $total_row = count($_POST['customer']);

  for ($i = 0; $i < $total_row; $i++) {
    usleep(100000);
      
    $this->db->insert('customers', $_POST['customer'][$i]);
    
    $percent = ($i + 1) * (100 / $total_row);

    echo "event: message\n";
    echo 'data: {"status": "loading", "percent": "' . $percent . '"}';
    echo "\n\n";

    ob_end_flush();
    flush();

    if (connection_aborted()) break;
  }

  echo "event: message\n";
  echo 'data: {"status": "done", "percent": "' . $percent . '"}';
  echo "\n\n";
}