Why is my jquery duplicating table rows?

Question

I am making a paginated table (with 3 lines per page), but when adding the rows in the table jquery is duplicating this.

When clicking on the page change icons, it adds more items and below these items appears what should appear (that is only 3 items).

What could it be? How can I fix it? What am I doing wrong? Thanks in advance for the comments!!!

Follows code below:

$(document).ready(function()
{
var storage = [
  ['Banana', '10,00'],
  ['Maça', '2,00'],
  ['Pera', '6,00'],
  ['Goiaba', '3,25'],
  ['Tamarindo', '1,50'],
  ['Cenoura', '0,75'],
  ['Alface', '0,99'],
  ['Tomate', '3,21'],
  ['Abacaxi', 'N/D'],
  ['Kiwi', '99,50'],
  ['Cebola', '1,15'],
  ['Alho', '1,02'],
  ['Abóbora', '4,75'],
  ['Pêssego', '2,33'],
  ['Laranja', '2,99']
];

var page = 0;
var maxRow = 3;

function createDash()
{
    $('.pagination > tr').remove();
    
    for 
    (
    var i = page * maxRow; 
          i < storage.length && 
          i < (page + 1) *  maxRow; 
          i++
    )
    {
        $('tbody').append(
            '<tr>'+
              '<td>'+ storage[i][0] +'</td>'+
                '<td>'+ storage[i][1] +'</td>'+
            '</tr>'
        );          
    }
    $('.pages').text('Page '+ (page + 1) +' of '+ Math.ceil(storage.length / maxRow));
}

$('.fa-chevron-right').click((e)=>
{
    e.preventDefault();
    
    if (page < storage.length / maxRow && page <= maxRow)
    {
        page++;
        createDash();
    } else {}
    
    e.stopImmediatePropagation();
});
    
$('.fa-chevron-left').click((e)=>
{
    e.preventDefault();
    
    if (page > 0) 
    {
        page --;
        createDash();
    } else {}
    
    e.stopImmediatePropagation();
});
    
createDash();
}); 

* {
    font-family: 'Arial';
}

table {
    width: 100%;
    font-weight: bold;
    background: #0ff090;
}

td, tr, tbody, th {
    padding: 15px 0;
    text-align: center;
}

tr td {
    width: 50%;
}

label {
    padding: 0 30px
}

.header {
    color: white;
    text-align: center;
    padding: 15px 0;
    background: #131417;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

.header i {
    cursor: pointer;
    width: 15px;
    height: 15px;
    padding: 5px;
    text-align: center;
    align-items: center;
    border-radius: 50px;
    transition: .2s ease-out;
}

.header i:hover {
    color: #131417;
    background: #0ff090;
}

.pagination {
    background: white;
}

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<table>
    <div class="header">
        <i class="fas fa-chevron-left"></i>
        <label class="pages">TABLE</label>
        <i class="fas fa-chevron-right"></i>
    </r>
    <tr>
        <td>FOOD</td>
        <td>PRICE</td>
    </tr>
    <tbody class="pagination">
    </tbody>
</table>

Answer 1

I resolved to change the append from $('tbody') to $('.pagination') which would be the tbody class. There must have been conflict between html, maybe tbody is the default.