JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/slimscroll/1.3.2/jquery.slimscroll.min.js"></script>
<div>
   <ul id="item-container">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
    </ul>
</div>

<input type="text" placeholder="add another item" id="add-input"/>
    <button id="add-btn">Add</button>

CSS

li { list-style: none; margin: 20px 0;; }

JavaScript

$(document).ready(function() {
    var itemContainer = $("#item-container");
    itemContainer.slimScroll({
        height: '200px',
        start: 'bottom',
        alwaysVisible: true
    });
    $("#add-btn").click(function() {
        var newInput= $("#add-input");
        if( newInput.val() !== "") {
            itemContainer.append("<li>" + newInput.val() + "</li>");
            newInput.val('');
        }
    });
});