вставка html не работает в цикле. JavaScript/JQuery

for (var i = 0; i < pages; i++) {
        $("#pagediv").html('<button onclick="testfunc()" name="pages' + i + '"></button>')
    }

В итоге я получаю лишь один элемент в div

<div id="pagediv" class="col-md-10 justify-content-center">
<button onclick="testfunc()" name="pages6"></button>
</div>

Почему он не вставляет необходимое количество раз. В цикле pages = 7. И да, по факту я получаю последний созданный элемент. Ведь pages6 = это pages + i. Вот оно только и есть. Последний элемент