Looping Through Post Categories with Load More Buttons

[OctoCog]

We’re trying to consume taxonomy terms for sections. Each section will display 4 posts under that taxonomy. The remaining posts will be visible under “Load More” button.

This is what the page looks like

The problem is when you click ‘Load More’ button on ANY section it only loads more posts for the first section. You can see the see this in action on our testing page here: https://bootstrap4.wpenginepowered.com/research-for-testing/

Here is an example of how it should work (we manually set these sections): https://bootstrap4.wpenginepowered.com/research/

Each Load More button has a classloadmore{{dc:looper:index_number}}
The hidden rows with the posts have an ID first{{dc:looper:index_number}}

This is the load more button JS

const showPosts = () => {
 document.getElementById("first{{dc:looper:index_number}}").classList.toggle('hidden');
                      var d = document.getElementById("loadmore{{dc:looper:index_number}}");
                     d.classList.add("hidden");       
}

Here is the CSS

.hidden{
  display: none;
}

The setup is fairly simple. I just don’t know what I’m missing here.

[ruenel]

Hello @OctoCog,

Thanks for writing in! You should be using element Class. Be advised that an element ID must be unique. There should NOT be any duplicate ID.

Be advised that custom CODING is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.