Как я могу скрыть элементы в моем списке и добавить функцию «показать больше»?

Я использую javascript для создания списка результатов. У меня есть цикл for, который выполняет итерацию по некоторым данным и создает div mydata и добавляет его в div результатов. Давайте представим, что это выглядит примерно так:

<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    ...
    <div class="mydata">data 20</div>
</div>

Я хочу отображать только 5 результатов за раз , и если пользователь желает увидеть больше, он может щелкнуть показать следующие 5 или Показать еще кнопку (или что-то подобное). Есть идеи?

Чтобы прояснить, каждый раз, когда пользователь нажимает «показать больше», я хочу «показать» следующие 5 элементов, а не ВСЕ остальные элементы. Таким образом, каждый щелчок открывает больше элементов, пока не будут отображены все.