MVC PagedList pager for multiple partial views in the same view

In the Index `View`, I use `@Html.Action` method to render two `PartialViews`. Example one will show a list of all products inside postlist `div` and one to display categories. When the `View` is loaded, it will automatically show all products, but when user clicks on a category, it will only show products within that category and load it in to the same `div` with `Ajax`. The problem is I need to use `pagination` in both scenarios.

Next some example code

Index `View`

<div class="row"><div class="col-lg-12">
            @Html.Action("Menu")</div></div><div class="row categoryBar"><div class="col-lg-12">
            @Html.Action("PostList")</div></div>

PostList and PostListCategory `ActionMethods`

public ActionResult PostList(int? page)
        {
            var postlist = db.Posts.ToList();
            var pageNumber = page ?? 1; 
            var pagedpostlist = postlist.ToPagedList(pageNumber, 5);
            return PartialView("_PostList", pagedpostlist);
        }
    public ActionResult PostListCategory(int? categoryid, int? page)
        {            
            var postlist = db.Posts.ToList().Where(c => c.CategoryID == categoryid);
            var pageNumber = page ?? 1;
            var pagedpostlist = postlist.ToPagedList(pageNumber, 1); 
            return PartialView("_PostListCategory", pagedpostlist);
        }

_postList `PartialView`

@model IEnumerable<PostIt.Models.Post>

    @using PagedList.Mvc; 
    @using PagedList; 
    
    <div id="_postList">
        @foreach (var item in Model)
        {
            @Html.DisplayFor(modelItem => item.Price)
        }</div>
        @Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "_postList"}))

_PostListCategory `PartialView`

@model IEnumerable<PostIt.Models.Post>

    @using PagedList.Mvc; 
    @using PagedList; 
    
    <div id="_postList">
        @foreach (var item in Model)
        {
            @Html.DisplayFor(modelItem => item.Price)
        }</div>
        @Html.PagedListPager((IPagedList)Model, page => Url.Action("PostListCategory", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "_postList"}))

And an example of my `Ajax` call when user clicks a category to filter posts.

$('.CategoryButton').click(function () {            
            var url2 = '@Url.Action("postlistcategory", "Home")';
            var category = $(this).val();
            var posts = $('#_postList');
            posts.empty();$.post(url2, { categoryid: category }, function (data) {$("#_postList").html(data).show();
            })
        });

Everything worked fine until I try to add `pagination`. As by default, Index `View` shows PostList `ActionMethod` (which shows all products), `pagination works with that, but when I filter them by category it goes mad. Firstly somehow another _postList `div` appear inside the original one, pagination loads fine, meaning numbers add up correctly for the number of pages, but can not use pagination. First I left the `@Url.Action("Index")` as it is, maybe by some miracle. It did not happened. After I have created a second `PartialView` called _postListCategory and changed it to the right `ActionMethod` - `@Url.Action("PostListCategory")`. Still does not work. Now I get an error saying it can not find postlistcategory `View`. From the `ActionMethod`, it is declared to show _postlistcategory, but even if I cheat and just change the name to see if it would work, no luck.

Any ideas?