How do you properly refresh a list using List.js

I have a reporting page that I don't want page refreshes on. On select list change, I call an API to generate the new report and spit it out to the DOM using List.js. The issue that I'm running into is: only the first report loaded works properly with the sorting functionality. I believe the core of the issue is how I'm 'refreshing' the list. Here is the code:

function initializeReport(videoName) {
    if (videoName) {
        toggleOverlay();
        $.ajax({
            url: '/api/report/' + videoName,
            type: "GET",
            dataType: "json",
            success: function (data) {
                var values = [];
                var countWatched = 0;
                data.forEach(function (entry) {
                    values.push({ name: entry.UserName, title: entry.Title, count: entry.Count, time_played: entry.TimePlayed })
                    if (entry.TimePlayed > 0) {
                        countWatched++;
                    }
                });
                toggleOverlay();
                var options = {
                    valueNames: ['name', 'title', 'time_played', 'count'],
                    item: '<li><div class="name"></div><div class="title"></div><div class="time_played"></div><div class="count"></div></li>'
                };
                var userList = new List('views', options);
                userList.remove();
                userList.add(values);

                animLoop(data.length, countWatched);
                document.querySelector(".watched").innerHTML = "Watched: " + countWatched;
                document.querySelector(".not_watched").innerHTML = "Not Watched: " + (data.length - countWatched);
            }
        });
    }
}