How to keep buttons within their respective divs

Hi guys,

I've blocks of divs which look like below:

<div class="main-container">
    <div id="tabs">
        <a href="#tab1!" class="tabs-link link1">
            <i class="fab fa-tab1">Explore</i>
        </a>
        <a href="#tab2!" id="follow" class="tabs-link link2">
            <i class="fab fa-tab2">Follow</i>
        </a>
    </div>
    <div class="tabs-item item1" id="explores">
        <div class="tabs-line line1" id="content1">
            <!-- DATA -->
        </div>
        <center><button id="load-more1" class="load-more-button">Load More</button></center>
    </div>
    <div class="ptabs-item item2" id="follows">
        <div class="tabs-line line2" id="content2">
            <!-- DATA -->
        </div>
        <center><button id="load-more2" class="load-more-button">Load More</button></center>
    </div>
</div>

Code (markup):

All the buttons are hidden by CSS "display: none;", they are shown by javascript when the visitor visits the page and if there are more data to display.

However, after the buttons are displayed by JavaScript they are there even when I toggled the tab. The button 1 appeared on the top when I switched to tab 2. Button 2 appeared at the bottom when I switched to tab 1.

How can I fix this?

Thank you,

 

Can you also post the JavaScript?

 

Hi @kennedygitahi,

It was just an ordinary fetch API.

const b1 = document.getElementById('load-more1');
const b1 = document.getElementById('load-more2');

async function getData() {
    const dt = "/path/to/file.json";
    fetch(dt, {
        method: 'POST',
        body: value
    }).then(response => {
        return (response.text());
    }).then((data) => {
        b1.style.display = 'block';
    }).catch(() => {
        console.log("No Data");
    });
}

Code (markup):

It triggered when you clicked on the link button. Currently, I fixed this with b1.style.display = 'none'; when you clicked on another tab. But it isn't the right way. The button disappeared unless you refresh the page. I want to fix this with CSS but I don't know how to do it.

 

ask GPT and analyze its answer

 

ChatGPT version:

document.querySelectorAll('.tabs-link').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();

        // Hide both load more buttons first
        document.getElementById('load-more1').style.display = 'none';
        document.getElementById('load-more2').style.display = 'none';

        // Get the id of the tab we are switching to
        const targetTab = this.getAttribute('href').substring(1);

        // Show the content and load more button for the active tab
        document.querySelectorAll('.tabs-item').forEach(item => {
            item.style.display = 'none'; // Hide all tab content
        });

        // Show the active tab content
        document.getElementById(targetTab).style.display = 'block';

        // (Optional) Show the corresponding "Load More" button if necessary
        if (targetTab === 'explores') {
            document.getElementById('load-more1').style.display = 'block';
        } else {
            document.getElementById('load-more2').style.display = 'block';
        }
    });
});

Code (CSS):

 

Thanks @GreenHost.Cloud,

I'll try it.