JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="next()">Next</button>
<ul class="list">
    <li id="1">Song 1</li>
    <li id="2">Song 2</li>
    <li id="3">Song 3</li>
    <li id="4">Song 4</li>
    <li id="5">Song 5</li>
    <li id="6">Song 6</li>
    <li id="7">Song 7</li>
    <li id="8">Song 8</li>
    <li id="9">Song 9</li>
    <li id="10">Song 10</li>
    <li id="11">Song 11</li>
    <li id="12">Song 12</li>
    <li id="13">Song 13</li>
</ul>

CSS

ul {
    height:300px;
    overflow-y:scroll;
    width:350px;
}
li {
    height: 59px;
    width:284px;
    background:grey;
    color:white;
    margin-top:10px;
}

JavaScript

var myID = $(".list").children().first().attr("id");

function next() {
    $(".list li").css("background", "grey");
    goToByScroll(myID);
    $("#" + myID).css("background", "red");
    myID = $("#" + myID).next("li").attr("id");
}

function goToByScroll(id) {
    $('.list').animate({
        scrollTop: $("#" + id).offset().top - $("#" + id).height()
    },
        'slow');
}