JSFiddle - React, Tailwind, and code Playground

HTML

<hr>
<button data-trigger="gonext">Got to Next</button>
<hr>

<div class="main">
  <div class="highlighted"><span>a</span></div>
  <div class="highlighted"><span>s</span></div>
  <div class="highlighted"><span>v</span></div>
  <div class="highlighted"><span>a</span></div>
  <div class="highlighted"><span>s</span></div>
  <div class="highlighted"><span>v</span></div>
  <div class="highlighted"><span>a</span></div>
  <div class="highlighted"><span>s</span></div>
  <div class="highlighted"><span>v</span></div>
  <div class="highlighted"><span>a</span></div>
  <div class="highlighted"><span>s</span></div>
  <div class="highlighted"><span>v</span></div>
</div>

CSS

.main {
  height: 400px;
  border: 1px solid grey;
  padding: 10px 20px;
  overflow: scroll;
}

.highlighted {
  height: 100px;
  border: 1px solid gray;
  margin-bottom: 10px;
}

.highlighted.active {
  background-color: orange;
  border-color: red;
  color: white;
}

JavaScript

$(function() {
  var el = $('[data-trigger="gonext"]');
  var currentPos = 0;

  el.on('click', gonext);

  $('.highlighted').each(function() {
    var y = $(this).position().top,
      text = $(this).find('span').text();

    $(this).find('span').text(text + ':' + y);
  });

  function gonext(ev) {
    var pos = $(".highlighted").eq(currentPos).position(),
      scrollTop = $(".main").get(0).scrollTop;
      
    console.log(Math.round(pos.top));
    $(".highlighted").eq(currentPos).addClass('active');
    currentPos++;

    if (pos) {
      $(".main").stop(true).animate({
        scrollTop: pos.top + scrollTop
      });
    }
  }
});