JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <div id="contentBottom"></div>
</div>
<a href="#contentBottom" class="addItem"> Add Item </a>

CSS

.container {
  position: relative;
  float: left;
  display: block;
  height: auto;
  overflow-y: scroll;
  border: 2px solid gray;
  width: 120px;
  max-height: 160px;
}

.item {
  border: 1px solid red;
  padding: 1rem;
}

.addItem {
  float: left;
	text-align: center;
	text-decoration: none;
	border: 2px solid maroon;
}

JavaScript

$(function() {
  var item = $("<div class='item'></div>");
  var i = 1;
  

  var container = $('.container').eq(0);
	
  $('.addItem').click(function() {
	  var text = "Item #" + i;
	  item.html(text);
		i++;
		
    container.append(item.clone());
    scrollToBottom(container);
  });

  function scrollToBottom(container) {
    var children = container.children('.item');

    $('#contentBottom').insertAfter(children.eq(children.length - 1));
  }
});