JSFiddle - React, Tailwind, and code Playground

HTML

<button id="loadMore">Load More</button>
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.</div>

CSS

.message {
 margin: 4px;
 border: 1px solid green;    
}

button {
   display: block;
   width: 100%;    
    height: 40px;
}

JavaScript

$(function() {
    var colors = ["red", "blue", "yellow", "purple", "gray", "orange", "green"];


    for (var i = 0; i < 5; i++) {
        $('.message:first').clone().appendTo('body').css({
            backgroundColor: colors[i % 7]
        });
    }

    $(document).scrollTop($(document).height());

    // This is the important part
    $(document).on('click', '#loadMore', function() {
        // Store reference to top message
        var firstMsg = $('.message:first');
        // Store current scroll/offset
        var curOffset = firstMsg.offset().top - $(document).scrollTop();
        
        // Add your new messages
        firstMsg.before($('.message').eq(5).clone());
        firstMsg.before($('.message').eq(5).clone());
        firstMsg.before($('.message').eq(5).clone());
        
        // Set scroll to current position minus previous offset/scroll
        $(document).scrollTop(firstMsg.offset().top-curOffset);
    });

});