Codeigniter Load More Data

Reference Link : https://webrocom.net/codeigniter-load-more-record-on-button-click/

//Controller
//-----------------------------

class Welcome extends CI_Controller {
    public function index()
    {
        $this->load->view('welcome_message');
    }

    public function getCountry(){
        $page =  $_GET['page'];
        $this->load->model('welcome_model');
        $countries = $this->welcome_model->getCountry($page);
        foreach($countries as $country){
            echo "<tr><td>".$country->id."</td><td>".$country->country_name."</td><td>".$country->country_code."</td></tr>";
        }
        exit;
    }
}
//Model
//-----------------------------
class Welcome_model extends CI_Model{

    public function getCountry($page){
        $offset = 10*$page;
        $limit = 10;
        $sql = "select * from countries limit $offset ,$limit";
        $result = $this->db->query($sql)->result();
        return $result;
    }
}

<div class="container" style="margin-top: 120px;">
    <h3>Ajax country list</h3>
    <table class="table">
        <thead>
        <tr><th>SN</th><th>Country name</th><th>Country code</th></tr>
        </thead>

        <tbody id="ajax_table">
        </tbody>
    </table>
    <div class="container" style="text-align: center"><button class="btn" id="load_more" data-val = "0">Load more..<img style="display: none" id="loader" src="<?php echo str_replace('index.php','',base_url()) ?>asset/loader.GIF"> </button></div>
</div>

ViewPage.html
<script>
    $(document).ready(function(){
        getcountry(0);

        $("#load_more").click(function(e){
            e.preventDefault();
            var page = $(this).data('val');
            getcountry(page);

        });

    });

    var getcountry = function(page){
        $("#loader").show();
        $.ajax({
            url:"<?php echo base_url() ?>welcome/getCountry",
            type:'GET',
            data: {page:page}
        }).done(function(response){
            $("#ajax_table").append(response);
            $("#loader").hide();
            $('#load_more').data('val', ($('#load_more').data('val')+1));
            scroll();
        });
    };

    var scroll  = function(){
        $('html, body').animate({
            scrollTop: $('#load_more').offset().top
        }, 1000);
    };


</script>