JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<button type="button" id="addItem">Voeg een item toe!</button>

<ul id="list">
    <li>Item <span>0</span></li>
</ul>

CSS

body {
    font-family:Verdana, sans-serif;
    font-size:15px;
}

ul#list > li {margin-bottom:3.5em;}
ul#list > li > span {font-weight:bold;}
button {
    position: fixed;
    top: 30px;
    right: 30px;
}

JavaScript

$("button#addItem").click(function() {
    $("ul#list").append("<li>Item <span></span></li>");
    $("ul#list > li > span").text(function() {
        var nummer = $(this).parent().index();
        return nummer;
    });
    
    if ($("ul#list > li:last").offset().top > $(window).height()) {
        $("html,body").animate({
            scrollTop: $("ul#list > li:last").offset().top},
                               "slow");
    }
});