Different result from array in html than in console

I am using ajax and jquery to get json from database and everything is great but in console when I log data[i].userID I get all elements which is: 55 57 58 59 but when I display in html code I got only last one, can’t find problem, anyone can help me? Thanks

$(function(){ 
    $("#users").on('click', function(){ 
    document.getElementById('top-today').classList = ('hide-cards');
    document.getElementById('type').innerHTML = "History";
    const fictionCards = document.getElementById('fiction-cards');
    while(fictionCards.children && fictionCards.children.length) {
        fictionCards.removeChild(fictionCards.children[0]);
    }
    $.ajax({ 
      method: "GET", 
      
      url: "connection.php",
      success: function(data) {
          for (i = 0; i< data.length; i++){
              console.log(data[i].userID);

              const string = `
              <table class="table table-striped">
              <thead>
              <tr>
                  <th scope="col">ID</th>
                  <th scope="col">First Name</th>
                  <th scope="col">Last Name</th>
                  <th scope="col">email</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <th scope="row">${data[i].userID}</th>
                  <td>${data[i].firstName}</td>
                  <td>${data[i].lastName}</td>
                  <td>${data[i].email}</td>
              </tr>
              </tbody>
              </table>`; 
              $("#fiction-cards").html(string);
          }
      }
    }) 
  }); 
});