Append ajax pagination with wp-pagenavi plugin instead remove old and load new ones

I have some custom posts call in my template like this.

<div class="container-fluid featured-task-container-home1 all-latst-cards" id="featured-task-container-home">
 <ul>
   <?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
     <li>
        <?php if($post->post_type  == "task"){
          show_all_latest_tasks();
        }?>
    </li>
   <?php 
     endwhile; 
        if(function_exists('wp_pagenavi')):
            wp_pagenavi();
        endif;
    else:
        echo __('No tasks posted.',"TaskerDev");
    endif;
    // Reset Post Data
      wp_reset_postdata();
    ?>
 </ul>
</div>

In the above code i used Wp-PageNavi to show pagination. i used one function in ul which add some more content in my post according to it’s type. it is working fine right now as it should be But here i want to show Load more button instead pagination and want this to be append more posts in my ul instead removing the old ones.

For Ajax i used this code

<script type="text/javascript" charset="utf-8">
        jQuery(document).ready(function(){
        jQuery('.wp-pagenavi a').live('click', function(e){
          e.preventDefault();
          var link = jQuery(this).attr('href');
          jQuery('.wp-pagenavi').html('Loading...');
          jQuery('.all-latst-cards').load(link+' .all-latst-cards ul');
        });  
        });
</script>

This script is loading posts on same page but removing old ones which is i don’t want.

I tried this WP Ajax load more Plugin but this is not getting all the data from my function show_all_latest_tasks();

I tried with many other articles too but no luck right now.

How can i make my pagination a Load more button and append upcoming (second page posts li's ) below my ul