Json table update after certain date

At the moment i have this code

// JavaScript Document

   $.ajax({

      type: 'GET',
      crossDomain: true,
      dataType: 'json',

      url: 'http://ift.tt/1JWasRJ',

      success: function (json) {
           //var json = $.parseJSON(data);
           for(var i =0;i < json.results.length;i++) {
             var title = json.results[i].name;
             var venue = json.results[i].venue;
                 var date = json.results[i].date;
                    var button = "<button class='btn btn-info' data-url='"+(i+1)+".html'>Compare</button>";

             $("#apple").append("<tbody><tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr></tbody>");
$("#apple").find(".btn.btn-info").click(function(){
   location.href = $(this).attr("data-url");
});
           }
     },
     error: function(error){
          console.log(error);
     }
   });

This appends the URL to a table. However as you can see this code here data-url='"+(i+1)+".html' created the button with an increment of 1 on the amount of buttons listed.

The issue is, this api is updating every 5 hours. When the event passes, The buttons need to really be updated. Otherwise the whole site breaks.

So the question is how could i go around making the links unique and update when an event passes? whilst im writing this i believe i could just use the Date function, So the code would be

data-url='"+date+".html'

Any other suggestions would be great?