获取增量值但不减少值

I have this function .

  function getnewads(){
      var newer ;
      var old_val =  $("#new_data").val() ;
    $.ajax({
         type: "POST",
          url: "users/process.php",
         data:{
              getnewads: "getnewads"
              },
        cache: false ,
      dataType: 'json',
         async: false
   }).success(function(dat){
    if(dat.status == 'success'){
             $("#new_data").empty();
                for(i = 0;i < dat.id.length; i++){
                  if(old_val > dat.counts ){ newer = old_val ;}else{ newer = dat.counts; }
            $("#new_data").html('<div value="'+newer+'" class="added_ad">'+ newer +' new ads </div>');


            }
            }
    //console.clear();
 });
  }

and html

   <div id="new_data" class="new_data">
   </div>

and in ads php file i have

   getnewads();
   setInterval(function() { getnewads(); }, 10000);

with the process file which gets ads every 10 seconds. I have this query to check for new ads every 10 seconds.

   SELECT m.id ,m.created_pub ,count(*) as counts FROM ads m 
                            WHERE m.published=1  AND TIMESTAMPDIFF(SECOND,created_pub,?)< 100 

My problem:

all works good but i couldnt get my desired result to work.

example:

if 1 ad is comming , it shows ----> 1 new ads

if 2 ad is comming , it shows ----> 2 new ads.

BUT if time difference is mpre then 10 seconds , it shows ---> 0 new ads ( again).

what i want is dont decrease counting to 0 but i want it to stay in 2 new ads till i click on that div then it will reset counting to 0 exactly like Stackoverflow in new questions.

is there something im missing ? any help would be much appreciated.

EDIT: aftervthe use of answer i used this function but im still getting unwanted result. i changed to show and hide div when its empty.

  function getnewads(){
  var newer ;
     // This fetches old value from 'data-value' attribute
   var old_val =  $("#new_data").data('value') ;
  $.ajax({
    type: "POST",
    url: "users/process.php",
    data:{
        getnewads: "getnewads"
    },
    cache: false ,
    dataType: 'json',
    async: false
 }).success(function(dat){
  if(dat.status == 'success'){
      $("#new_data").empty();
      for(i = 0;i < dat.id.length; i++){
          if(old_val >= dat.counts ){ newer = dat.counts ;}else{ newer = old_val; }
        if(newer > 0){
          $("#new_data").html('<div class="added_ad">'+ newer +' new ads </div>');
          // This set 'data-value' attribute to #new_data element
          $("#new_data").data('value',newer);
          $("#new_data").show();
          }
      else{$("#new_data").hide();
                $("#new_data").data('value',0);
               }

      }
  }
 });
 }

what happen with function is :

if 1 ads came --> it shows 1 new ads. after 10 seconds of the query then it desapear this div of new_data . so i understand that it doesnt save the old value.

what is going wrong ?

There is two problems I can see with your code

1. Do not use value in div try using data-value instead and fetch the old value with $('#new_data').data('value');

2. Also you are adding the value to the wrong element. Try this.

   function getnewads(){
      var newer ;
      // This fetches old value from 'data-value' attribute
      var old_val =  $("#new_data").data('value') ;
      $.ajax({
           type: "POST",
           url: "users/process.php",
           data:{
               getnewads: "getnewads"
           },
           cache: false ,
           dataType: 'json',
           async: false
      }).success(function(dat){
         if(dat.status == 'success'){
             $("#new_data").empty();
             for(i = 0;i < dat.id.length; i++){
                 if(old_val > dat.counts ){ newer = old_val ;}else{ newer = dat.counts; }
   
                 $("#new_data").html('<div class="added_ad">'+ newer +' new ads </div>');
                 // This set 'data-value' attribute to #new_data element
                 $("#new_data").data('value',newer);
             }
         }
       });
   }