How to scroll and load more using the slice method, in pug and JavaScript?

Question

I have a pug file, where you see allBikeData, that is the name of my JSON,

ul.bikeshop-page 
        for specificBike in allBikeData.slice(0, 12)
          .bikeshop-card.bg-white.m-3.p-4
            li
              img.shop-image(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
            li
              img(src=specificBike.logo, alt="")
            li
              a.text-dark(href=specificBike.website)
                h3.font-weight-bold=specificBike.shopname
            li
              h4=specificBike.contact
            li
              h4
                span.glyphicon.glyphicon-earphone 
                p=specificBike.phone
            li
              h4
                span.glyphicon.glyphicon-home
                p=specificBike.address
            li
              a.btn.btn-success(href=specificBike.facebook) Facebook
              a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram
        div.loading
          div.ball
          div.ball
          div.ball

I'm still trying to load another 12 as you scroll to the bottom, I can figure this out with pug. (FYI, I'm challenged to use pug in my internship) Here is my script.

  script.

    allBikeData = !{JSON.stringify(allBikeData)}

    const loading = document.querySelector('.loading')
    const showLoading = () => {
      loading.classList.add('show')
    }
    const stopLoading = () => {
      loading.classList.remove('show')
    }
    const loadData = document.querySelector('.bikeshop-page')


    window.addEventListener('scroll', () => {
      if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight){
        showLoading()
        appendData()
      } else {
        stopLoading()
      }
    })

    const appendData = () => {
      let pug = ``
      for(i = 0; i < 10; i++) {
        pug = `
              for specificBike in allBikeData.slice(12, 24)
                .bikeshop-card.border.border-dark.bg-white.m-3.p-4
                  li
                    img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
                  li
                    img(src=specificBike.logo, alt="")
                  li
                    a.text-dark(href=specificBike.website)
                      h3.font-weight-bold=specificBike.shopname
                  li
                    h4=specificBike.contact
                  li
                    h4
                      span.glyphicon.glyphicon-earphone 
                      p=specificBike.phone
                  li
                    h4
                      span.glyphicon.glyphicon-home
                      p=specificBike.address
                  li
                    a.btn.btn-success(href=specificBike.facebook) Facebook
                    a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram`
          }
      loadData.append(pug)
    }

If anyone could help me solve it this was that would be nice and Thank You!