How do you make a function in JavaScript that displays 10 elements at a time with a button?

I am displaying data from a JSON file to a website using HTML. I want it to display the first 10 actors in the list and the movie they are in. Then I want the user to be able to press a button and be able to display the next 10, and another button to go back 10. I have been able to display the first 10 onload, I have an index on line 17 that counts how many rows I have added to “newContent” and once it reaches 10 it breaks the loop on line 36. But when I press the button on the page the index no longer works. It just goes past 10 without breaking till the loop goes through the entire JSON file.

var actors = [];


const xhr = new XMLHttpRequest(); //Gets the http request

xhr.onload = function () {
    if (xhr.status == 200) {
        var responseObject = JSON.parse(xhr.responseText);
        var newContent = '';

        var parameter = 0;
        var counter = 0;
    
    function table(parameter) {
        
        var index = 0;

        for (var i = parameter; i < responseObject.movies.length; i++) {
            for(var j=0; j < responseObject.movies[i].cast.length; j++){
                //Checking for duplicates
                if((actors.indexOf(responseObject.movies[i].cast[j]) == -1)) {
                    var letter = responseObject.movies[i].cast[j].charAt(0);
                        if((/[a-zA-Z]/).test(letter)) {
                            newContent += '<tr class="event">';
                            newContent += '<td>' + responseObject.movies[i].cast[j] + '</td>';
                            newContent += '<td>' + responseObject.movies[i].title + '</td>';
                            newContent += '<td>' + index + '</td>';
                            newContent += '</tr>';
                            index++;
                        }
                    }
                }
                counter++;

                if (index == 10) {   
                    break;
                }
            }
            return newContent;
        }
        document.getElementById('castNames').innerHTML = table(0);

        var showMoreBtn = document.getElementById('showMoreBtn');
        showMoreBtn.addEventListener('click', showMore, false);

        
        function showMore() {
            parameter = counter;
            return document.getElementById('castNames').innerHTML = table(parameter);
        }
        
    }
    

}


xhr.open('GET', "static/data/movies.json", true);
xhr.send();

table {
    width: 100%;
}

tr {
    border-bottom: 1px solid black;
}

th {
    color: black;
}

td {
    padding-top: 5px;
    color: black;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  
    <link rel="stylesheet" href="static/css/style.css">

  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <img src = "static/images/movieLogo.png" alt = "reel of film" width = "50px" height = auto style = "margin-right: 25px;">
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
          <li><a href="{{ url_for('index') }}" class="nav-link px-2 link-secondary">Home</a></li>
          <li><a href="{{ url_for('movies') }}" class="nav-link px-2 link-dark">Movies</a></li>
          <li><a href="{{ url_for('actors') }}" class="nav-link px-2 link-dark">Actors</a></li>
          </ul>
        </div>
      </div>
    </nav>
    
<div id = "buttonClass">
    <button id="showMoreBtn" class = "button" type="button">More</button>
    <!--<button id="viewLessBtn" class = "button" type="button">More</button>-->
</div>
    <table>
        <thead>
            <tr>
                <th class = "tableHeader">Name</td>
                <th class = "tableHeader">Movie</td>
            </tr>
        </thead>

        <tbody id="castNames">

        </tbody>
    </table> 
    
    <!--<p id="castNames"></p>-->

    <script src="{{ url_for('static', filename='actorDisplay.js') }}"></script>
    
        <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

TLDR index in my JavaScript in the function table() is working when I load the page but not when I call the function with the button to see the next 10.