How to display JSON data according to url passing (year) (if 2015 only 2015 data should show not 2016 data))

I am creating a hybrid app using Intel xdk and I am using jQuery Mobile for the UI, I am trying to display my JSON data in my shortcut, first of all let me tell you how I need the interface. I have two buttons (increment, decrement) between these two buttons, I have one label. For example: consider that we set the label value to "2015" (current year), if I click the increment button, my value increments as 2016,2017 and so on. The same as the decrease button, if I click on the values ​​it is 2014,2013 and so on. This is my UI header design ok, let me come to the content, in the content part I am going to display JSON data from the url according to the above year shown for ex: suppose it is 2015 on my label,i have to display only 2015 data ("sports day" refers to my below (post) JSON) in my content div tag. Now if I increase 2016 using the increase button, I should only display the 2016 data ("Cultures" link to my bottom (post) json) to my same content page and should not display the previous data values ​​(2015 data). I have attached my requirements images as I need to just check these two linkslink to my bottom (post) json) to my own content page and shouldn't display previous data values ​​(2015 data). I have attached my requirements images as I need to just check these two linkslink to my bottom (post) json) to my own content page and shouldn't display previous data values ​​(2015 data). I have attached my requirements images as I need to just check these two links

https://drive.google.com/file/d/0B9RwnaNuUwNdQlg5aVIwSklaX3M/view

https://drive.google.com/file/d/0B9RwnaNuUwNdaTktTTR4eGdReE0/view

This is my Json Data url (2015 data)

{
  "circular":
      [ 
         {
           "id":"9",
           "year":"2015",
           "date":"2015-04-17",
           "message":"Sports day",
           "timestamp":"2015-04-18 19:14:24",
         },
      ]
}  

      

        
        
        
      

    

This is my Json Data url (2016 data)

  {
  "circular":
      [ 
         {
           "id":"10",
           "year":"2016",
           "date":"2015-04-17",
           "message":"Culturals",
           "timestamp":"2015-04-18 19:14:24",
         },
      ]
}  

      

        
        
        
      

    

Now I am getting data on the same page, which means 2015 data and 2016 data are displayed on the same page when the increment button is clicked. I want to display 2016 data separately, not including 2015 data. I am using the concept of mustache to display JSON data.

//this function is for getting json data from URL 
 $.fn.myFunction = function() { 

    $.getJSON(url,  function(data){

       for (var i=0, len=data.circular.length; i < len; i++) {

           output = data.circular[i];

            alert(output.message);

       }
             //this is for displaying json data     
              var template =$('#sharesTemplate').html();
             //data.circular is my json data
              var html = Mustache.to_html(template,data.circular);
              $('#samplearea1').append(html).appendTo(this);

           });
      } 

      

        
        
        
      

    

This is my mustache code for displaying JSON data dynamically.

       <div id="samplearea1"></div>
        <script id="sharesTemplate" type="text/template">

            {{#.}}

            <h1>{{message}}</h1>

            {{/.}}

        </script>