Difference between attr and data in jquery?

Question

I was trying following scenario:-

1. I have a page in which there is content(articles,blogs etc..).
2. There are categories to filter them.
3. So when I select and category the div containing the content is modified using jquery.
4. Initially 7 articles/blogs etc. are displayed and there is a button to read more if the content number exceeds 7.

Now coming to a peculiar doubt which I was facing regarding attr and data.

I filter content using following code in my js file:-

 $("[id^=filter]").click(function(){
$(".tag").children('a').removeClass("active");
$(this).addClass("active");
$('#wl-more-articles').data("current-category",$(this).data("currentCategory"));
$.get('/xxx/api/more-articles/?category='+$(this).data("currentCategory")+"&offset="+0+"&filtered="+1,
            function(result, status){
                $(".wl-cards-container").empty();
                $('.wl-cards-container').append(result.cards);
                $('#wl-more-articles').data("total-articles",result.total_content);
                if(result.next_offset >0)
                {
                     $('#wl-more-articles').show()
                }
                else
                {
                    $('#wl-more-articles').hide()
                }
            });
 });
});

In the above code wl-more-articles is the part where I fetch more articles. Following is the code for it:-

    $('#wl-more-articles').click(function(){
    var el = $(this);
    $.get('/xxx/api/more-articles/?offset='+$(this).data("nextOffset")+"&content_type="+$(this).data("contentType")+"&total_articles="+$(this).data("totalArticles")+"&category="+$(this).data("currentCategory"),
            function(result, status){
      $('.wl-cards-container').append(result.cards);
      if(result.next_offset === null || result.next_offset === 'undefined'){
          el.hide();
      }else{
          el.data("nextOffset", result.next_offset);
      }
    });
  });

Now, when I select a particular category say Category 1 which has 9 articles, so initially 7 articles would be shown. Now where I click read more button, things work fine and my content comes. Now, when I select another category say Category 2 which has 10 articles, initially 7 articles come and when I click on read more, something peculiar happens, if I use attr instead of data in the following part :-

 $('#wl-more-articles').attr("data-total-articles",result.total_content);

Now, if do above the data from previous category comes to this category(i.e. category and number of articles for category 1 comes), but if i use data instead things work totally fine.