Change automatically content of span based from number of rows from mysql using Javascript

I'm trying to create a dynamic number of notification feed on the menu. When there is a new added data in one of my table, it will change the number on the notification bar automatically, without refreshing the page.

Here's the html:

<li>
  <a href="categories.php">
    Categories 
    <span class="badge" id="badg"></span>
  </a>
</li>

And here is the script that I've used:

$(document).ready(function() {
  var arr = <?php include("array.php"); ?>; /* e.g. ["1","2","3"] */
  var size = arr.length;
  document.getElementById('badg').innerHTML = size;
});

The number of arrays are showing, but doesn't change automatically when there is a new data. It will only change when the page are refreshed by the user.

How can I do it automatically?