Помогите решить проблему с Tab'ами

У меня есть 18 карточек с товаром, завернутые в grid-сетку. Какая задача: при загрузке страницы видим 9 карточек, снизу кнопки 1 и 2. и соответственно переключаем этими кнопка карточку с 1-9 и 10-18. все, что я смог сделать, это только открытие 10-18 карточек при нажатии на вторую кнопку, но при нажатии на 1 кнопку все остается на своих местах, не менясь. Мои знания в js на данный момент весьма слабоваты, поэтому прошу помощи здесь. Код по ссылке: codepen.io/Nikita-Dev94/pen/ZEjeavo