JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<main class="main-container">
  <div class="main-content">
    <form action="" class="sections">
      <fieldset data-section="1">
        <ol>
          <li><input type="checkbox" name="a">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et, ad, quos nesciunt dolorem mollitia quisquam autem perferendis minus eos placeat hic quis atque, voluptate consectetur iure. Eveniet, qui, temporibus.
            </p>
          </li>
          <li><input type="checkbox" required name="b">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas sunt cumque at odio non aliquam expedita eveniet blanditiis alias, fugiat architecto quae, magnam laborum maiores dolor facilis officia iste beatae.
            </p>
          </li>
          <li><input type="checkbox" name="c">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et, ad, quos nesciunt dolorem mollitia quisquam autem perferendis minus eos placeat hic quis atque, voluptate consectetur iure. Eveniet, qui, temporibus.
            </p>
          </li>
        </ol>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas sunt cumque at odio non aliquam expedita eveniet blanditiis alias, fugiat architecto quae, magnam laborum maiores dolor facilis officia iste beatae.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et, ad, quos nesciunt dolorem mollitia quisquam autem perferendis minus eos placeat hic quis atque, voluptate consectetur iure. Eveniet, qui, temporibus.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas sunt cumque at odio non aliquam expedita eveniet blanditiis alias, fugiat architecto quae, magnam laborum maiores dolor facilis officia iste beatae.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et, ad, quos nesciunt...

CSS

.main-header {
  height: 50px;
  background: #aaa;
}

.main-content {
  padding-bottom: 50px;
}

.main-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 50px;
  background: rgba(100, 100, 100, 0.5)
}

JavaScript

const form = document.querySelector('form.sections')
const submit = form.querySelector('button')
const sections = Array.from(form.querySelectorAll('fieldset:not(:first-child)'))

sections.forEach(section => {
  section.style.display = 'none'
})

let i = 0;

form.addEventListener('submit', (e) => {
  alert('a')
  sections[++i].style.display = 'block'
})