call a route to load a list of data using js – Jquery

One way to achieve this is that you can save the offset value in your show-all-message-btn div using data-attr and whenever you need to load more data you can just get the offset from there and use ajax call to fetch the required rows and again update the offset in your button.

Some changes you can do in your code :

Your current html code :

<div class="message-history">
<?php foreach ($messageModel->getAllMessages() as $index => $message) { ?>
<div class="message">
    <div class="panel">
        <p><?= $message->date ?></p>
        <p><?= $message->data ?></p>
    </div>
</div>
<?php } ?>
<div class="show-all-message">
    <!--added offset here-->
    <div class="show-all-message-btn" data-offset="6">Show all message history</div>
</div>
</div>

Your current route function :

public function getAllMessages()
{
    $allMessages = Message::find()
        ->where(['=', 'phone', $this->phone])
        ->limit(5) //add limit ..for initial load.. (this is just for demo)
        ->all();
     //... more codes
}

Now, you will see only 5 rows and button which has offset set to 6.Next , you need to write some jquery code which will get the offset and send to your backend code to query next 10 or more records and then append them in your UI.

Your jquery code will somewhat look like below :

$(".show-all-message-btn").click(function() {

  var offset = parseInt($(this).attr("data-offset")) //will get the offset..
  var updated_offset = offset + 10; //next 10 records
  var el = $(this);
  $.ajax({
    url: 'someurl..',
    type: 'POST',
    dataType:"JSON",
    data: {
      offset: offset,
      //pass phone number as well
    },
    success: function(data) {
      $(".message-history").append(data.html); //return the htmls and append to your history div//
      $(el).attr("data-start", updated_offset);
    }
  });
})

Now, your ajax will call some of the function in your backend there you can fetch the next 10 records and send back to UI.

Your controller code will somewhat look like this :

public function loadMore(//..get the request params)
{
    $allMessages = Message::find()
        ->where(['=', 'phone', //add variable got from ajaxcall])
        ->offset(//pass here the request param which we get from ajax call)
        ->limit(10)
        ->all();
     //do for each and append the result... in some html 
    $html = "";
    foreach(//..looping..add your code ){
       $html .="//add your message div here.. "
    }
    //generate json object ..
    //add the key in json with html ..and assign $html to it.
    //send back the response 
}

*Note : This is not the actual code but, this will help you to get started .