jPages works only after ajax request, not on page load

[smylmrz]

I have this issue. I have a blog page and with posts, and I want to paginate them with jPages, it shows next and previous buttons but not the pages. After filtering the posts it works fine and pages appear on the pagination holder. I've used this plugin before but this is the first time I faced this issue.

[smylmrz]

$(function() {
$(".pagination-holder").jPages({
containerID : "cards",
previous: '{{ trans("button.previous") }}',
next: '{{ trans("button.next") }}'
});
})

[smylmrz]

$('#sort').on('change',function(){

const form = $('.sort-form');

$.ajax({
    url: "{{ route('blog.filter') }}",
    method: 'post',
    data: form.serialize(),
    success:function(r){
        $('#cards').html(r)
    }
})
.done(function(){
  $(".pagination-holder").jPages({
    containerID : "cards",
    previous: '{{ trans("button.previous") }}',
    next: '{{ trans("button.next") }}'
    });
  });
});


$(".sort-form").on('submit', (e) => {
  e.preventDefault()
})

[smylmrz]

The second script works and pages show on the pagination holder after getting a response.