JSFiddle - React, Tailwind, and code Playground

HTML

Messages:

<div id="board">
    <span class="message" order="2">Message Foo</span>
    <span class="message" order="3">Message Bar</span>
    <span class="message" order="1">Message Test</span>
</div>

CSS

.message {
    display: block;
    height: 400px;
    border: 1px solid gray;
}

JavaScript

$(document).ready(function(){   
    // each half second, updates scroll
    window.setInterval(updateScroll, 100);    
    
    // after 2 seconds, add new message to test scroll
    window.setInterval(newMessage, 2000);             
});

function updateScroll(){
    var messages = $(".message");
    var newMessage = $(messages[0]);
    $(".message").each(function(){
        if ($(this).attr("order") > $(newMessage).attr("order")) {
            newMessage = $(this);
        }
    });
    var top = newMessage.offset().top;
    $(document).scrollTop(top);    
}

function newMessage() {
    var text = Date() + "<br/> - new message!";
    var tag = "<span order=\"9\" class=\"message\">" + text + "</span>";
    $('#board').prepend(tag);
}