CSS:
<style>
.item-section {
  padding: 4em 0;
}

.item-section h2 {
  margin-bottom: 2em;
}

.cust-items {
  margin-bottom: 20px;
}

.item-box {
  background: #f5f5f5;
  border: 3px solid #00e5db;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}

.item-box hr {
  border-top: 2px solid var(--cta-color);
  width: 10%;
  margin: 20px 0;
}

#loadMoreBtn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #00e5db;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

#loadMoreBtn:hover {
  background-color: transparent;
  outline: none;
  border-color: #00e5db;
  color: #00e5db;
}

#loadMoreBtn:focus {
  outline: none;
}

.codebox {
  padding: 4em 0;
  background-color: #f5f5f5;
}

.codebox h2 {
  margin-bottom: 3em;
}

.codebox button {
  position: absolute;
  right: 2em;
  top: 3em;
}

.codebox .btn-cta {
  border-color: #00e5db;
}

#codeBlock {
  position: relative;
}

pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 1rem 2rem;
  overflow-x: auto;
  border-radius: 20px;
  font-size: 14px;
}

code {
  font-family: Consolas, Monaco, "Courier New", monospace;
}
</style>

               
HTML:
               <div class="item-section">
   <div id="moreItems">
      <div class="container">
         <div class="row">
            <div class="cust-items">
               <!-- HTML code for each item will be dynamically added here -->
               <!--Item 1 -->
               <div class="item-box">
                  <h3>Title_Here 1</h3>
                  <p>CONTENT 1</p>
                  <hr>
                  <p><strong>SUB_TITLE 1</strong></p>
               </div>
               <!--Item 2 -->
               <div class="item-box">
                  <h3>Title_Here 2</h3>
                  <p>CONTENT 2</p>
                  <hr>
                  <p><strong>SUB_TITLE 2</strong></p>
               </div>
               <!--Item 3 -->
               <div class="item-box">
                  <h3>Title_Here 3</h3>
                  <p>CONTENT 3</p>
                  <hr>
                  <p><strong>SUB_TITLE 3</strong></p>
               </div>
               <!--Item 4 -->
               <div class="item-box">
                  <h3>Title_Here 4</h3>
                  <p>CONTENT 4</p>
                  <hr>
                  <p><strong>SUB_TITLE 4</strong></p>
               </div>
               <!--Item 5 -->
               <div class="item-box">
                  <h3>Title_Here 5</h3>
                  <p>CONTENT 5</p>
                  <hr>
                  <p><strong>SUB_TITLE 5</strong></p>
               </div>
               <!--Item 6 -->
               <div class="item-box">
                  <h3>Title_Here 6</h3>
                  <p>CONTENT 6</p>
                  <hr>
                  <p><strong>SUB_TITLE 6</strong></p>
               </div>
               <!--Item 7 -->
               <div class="item-box">
                  <h3>Title_Here 7</h3>
                  <p>CONTENT 7</p>
                  <hr>
                  <p><strong>SUB_TITLE 7</strong></p>
               </div>
               <!--Item 8 -->
               <div class="item-box">
                  <h3>Title_Here 8</h3>
                  <p>CONTENT 8</p>
                  <hr>
                  <p><strong>SUB_TITLE 8</strong></p>
               </div>
               <!--Item 9 -->
               <div class="item-box">
                  <h3>Title_Here 9</h3>
                  <p>CONTENT 9</p>
                  <hr>
                  <p><strong>SUB_TITLE 9</strong></p>
               </div>
               <!--Item 10 -->
               <div class="item-box">
                  <h3>Title_Here 10</h3>
                  <p>CONTENT 10</p>
                  <hr>
                  <p><strong>SUB_TITLE 10</strong></p>
               </div>
               <!--Item 11 -->
               <div class="item-box">
                  <h3>Title_Here 11</h3>
                  <p>CONTENT 11</p>
                  <hr>
                  <p><strong>SUB_TITLE 11</strong></p>
               </div>
               <!--Item 12 -->
               <div class="item-box">
                  <h3>Title_Here 12</h3>
                  <p>CONTENT 12</p>
                  <hr>
                  <p><strong>SUB_TITLE 12</strong></p>
               </div>
               <!-- Add more items here -->
            </div>
            <button class="btn btn-cta" id="loadMoreBtn">Load More</button>
         </div>
      </div>
   </div>
</div>


JS:
<script>
 document.addEventListener('DOMContentLoaded', function() {
  const itemsContainer = document.querySelector('.cust-items');
  const loadMoreBtn = document.getElementById('loadMoreBtn');
  const itemsPerPage = 3;
  let currentIndex = itemsPerPage;

  function showItems() {
    const items = document.querySelectorAll('.item-box');
    for (let i = currentIndex; i < currentIndex + itemsPerPage; i++) {
      if (items[i]) {
        items[i].style.display = 'block';
      }
    }
    currentIndex += itemsPerPage;
    if (currentIndex >= items.length) {
      loadMoreBtn.style.display = 'none';
    }
  }

  loadMoreBtn.addEventListener('click', showItems);

  // Initially hide items beyond the first page
  const items = document.querySelectorAll('.item-box');
  for (let i = itemsPerPage; i < items.length; i++) {
    items[i].style.display = 'none';
  }
});
</script>