Ajax, Update div with num_rows

Question

I've built a notification system, and its almost working. I just have one niggly bit that I can't seem to get my head around. When a new update comes in from a friend it prints out the number of new notifications as expected, only if a user posts twice num_rows 2 pops up.. but if a user posts again it updates and replaces the 2 new notifications number back to 1 in the div because I'm using html in the ajax to replace. So my question is, how can I update the div to get the total amount of results so it goes 1,2,3,4 etc instead of 2,1,1,1,1. I don't want to replace the num of new rows with only the (1) update in the div, just add to the amount of new updates already inside it.

A bit like when facebook shows amount of notifications. say I have two and a friends posts on my wall I then will have 3.. but at the moment its adding the last new num row and going back to 1.

AJAX

<script type="text/javascript">
function loadIt() {
  var notification_id="<?php echo $notification_id['notification_id'] ;?>"
  var notification_id= window.localStorage.getItem ('lastId'); 
$.ajax({
type: "GET",
url: "viewajax.php?notification_id="+notification_id,   
dataType:"json",
cache: false,
 success: function(response){
 if(response){
    dataHandler;
    if(response.num){
       window.localStorage.setItem('lastId', response.notification_id);

  var dataHandler = function(response){
   var isDuplicate = false, storedData = window.localStorage.getItem ('lastId');

   for (var i = 0; i < storedData.length; i++) {
     if(storedData[i].indexOf(response) > -1){
        isDuplicate = true;
     }
   }
   if(!isDuplicate){
     storedData.push(response);
   }
}; 
if(response){
   if(response.num){
      $("#notif_actual_text-"+notification_id).prepend('<div  id="notif_actual_text-'+response['notification_id']+'" class="notif_actual_text"><a href="'+response['notification_id']+'">'+response['notification_content']+' </a><br />'+response['notification_time']+'</div></nr>');

      $("#mes").html(''+ response.num + '');
    }
};     
}
}   
}
});
}
setInterval(loadIt, 10000);

PHP

$json = array();
$com=mysqli_query($mysqli,"select notification_id,notification_content,notification_time from notifications where notification_id > '$id' AND notification_status=1 ");
echo mysqli_error($mysqli);

$num = mysqli_num_rows($com);
if($num!=1){

    $json['num'] = $num;
}else{
    $json['num'] = 0;
}
$resultArr = mysqli_fetch_array($com);
$json['notification_id'] = $resultArr['notification_id'];
$json['notification_content'] = $resultArr['notification_content'];

mysqli_free_result($com);
header('Content-Type: application/json');
echo json_encode($json);

}

Answer 1

The number of notifications on client-side is storedData.length.

So i would replace the counter

$("#mes").html(''+ response.num + '');

with

$("#mes").html(storedData.length);