I hope everyone is good. I am presently working on a landing page. I want the visibilities of some divs to be controlled by some buttons, i.e when a particular button is clicked, a particular div should display, and when another button is clicked, another div should display. I want this to happen at two different sections of the page. I did for the first section and it works fine, but when I did for the second section, it didn’t work. When I comment out the first section, the second starts working. Also when I interchanged their position, the second works while the first refused to work. Kindly help me out with this. Thank you.
/************************FAQ Section**************/
const questions = document.querySelectorAll(".btn2");
for (let j = 0; j <= questions.length; j ){
questions[j].addEventListener('click', (e) => {
const et = e.target;
const activeBtn = document.querySelector(".active");
if (activeBtn){
activeBtn.classList.remove("active");
}
et.classList.add("active");
const answers = document.querySelectorAll(".answer");
for (let x = 0; x <= answers.length; x ){
if(answers[x].getAttribute("data-number") === questions[j].getAttribute("data-number")){
answers[x].style.display = "block";
} else {
answers[x].style.display = "none";
}
}
});
}
/*************************Browse Courses**********************/
const schools = document.querySelectorAll(".btn3");
for (let y = 0; y <= schools.length; y ){
let test = schools[y].getAttribute("data-id");
console.log(test);
}//The First Section
<div >
<div >
<button data-number="1" >
<h5>
What Are Coding Bootcamps?
</h5>
<i ></i>
</button>
<button data-number="2" >
<h5>
How Do Coding Bootcamps Work?
</h5>
<i ></i>
</button>
<button data-number="3" >
<h5>How Do I Choose My Tech Carrer Path?</h5>
<i ></i>
</button>
<button data-number="4" >
<h5>
How Long Are The Nest Academy Coding Bootcamps?
</h5>
<i ></i>
</button>
<button data-number="5" >
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<i ></i>
</button>
</div>
<div data-number="1">
<p>
<h5>
What Are Coding Bootcamps?
</h5>
<p>
Coding bootcamps are short, intensive training coding programs and tech courses that give students the
skills they need for new careers in technology. Programming bootcamps and code schools like BrainStation
have become an increasingly popular alternative to a four-year computer science degree, allowing
students to gain real-world experience under the instruction of top industry professionals.
While "coding bootcamps" as a term has come to be used for digital skills training across disciplines,
including courses and programs relating to web development, software development, data science, UX
design, and digital marketing, the term originally was meant to describe short-term, intensive training
programs in full-stack web development, software development, or software engineering.
As one of the best coding bootcamps, BrainStation provides hands-on, project-based learning, allowing
students with no prior experience to learn how to use programming languages like HTML, CSS, JavaScript,
Python, SQL, and more.
The goal of our coding bootcamps is to prepare you for a new career in web development, software
development and engineering, data science, design, security, digital marketing, or related tech fields.
To that end, bootcamp graduates also benefit from ongoing, personalized career services meant to provide
guidance and support during the job search.
</p>
</p>
</div>
<div data-number="2">
<p>
<h5>
How Do Coding Bootcamps Work?
</h5>
<p>
Coding bootcamps work by giving students hands-on experience with the key programming languages, knowledge areas, and technical skills needed for a career in technology.
The best coding bootcamps are taught by experienced professionals who know what employers are looking for. Many bootcamp students are looking to change careers, so the best bootcamps help with the job search, including career services, a network of hiring partners, and opportunities to build professional networks through events and guest lectures.
Ultimately, coding bootcamp students learn the skills and develop the project portfolio necessary to land a job in web and software development, software engineering, data science, UX design, digital marketing, or other tech fields.
</p>
</p>
</div>
<div data-number="3">
<p>
<h5>
How Do I Choose my Tech Career Path?
</h5>
<p>
When trying to determine your tech career path, the first step is to understand where your interests and passions truly lie. Do you have a good sense of computer science fundamentals? Are you excited about the idea of building a website? Take a look at full-stack web development and the kinds of careers you can have after taking a web development bootcamp. Are you good with numbers and like identifying trends (that would have remained hidden)? A career in data science might be for you. Asking yourself questions like these will help guide your job search and the kind of training you need.
From there, take stock of the skills and experience you currently have – whether or not they are in computer science. Is there any overlap with skills that are most in demand? Does your education and professional experience lend itself to an emerging field like data science, software, development, or digital marketing?
</p>
</p>
</div>
<div data-number="4">
<p>
<h5>
How Long Are BrainStation's Coding Bootcamps?
</h5>
<p>
BrainStation's coding bootcamps generally take three months to complete on a full-time basis — 12 weeks.
In that time, you will develop a comprehensive understanding of web development, data science, user experience design, or digital marketing fundamentals, and learn how to apply these new skills and knowledge. BrainStation bootcamps are immersive and project-based, allowing you to build a portfolio of completed projects by the end of the bootcamp.
For students seeking more flexibility, BrainStation also offers part-time bootcamps, which are completed over eight months.
</p>
</p>
</div>
<div data-number="5">
<p>
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<p>
Tuition for full-time coding bootcamps can vary depending on the field of study, the location of the campus, the method of study chosen (online or in-person), or how comprehensive the course is.
Some programming bootcamps and code schools could be relatively inexpensive or quick to complete, but might not cover the full range of skills and competencies needed, especially for students interested in full-stack web development.
</p>
</p>
</div>
</div>
//The Second Section
<div >
<div >
<div ></div>
<div >
<div >
<button data-number="1" >
Tech
</button>
<button data-number="2" >
Enter
</button>
<button data-number="3" >
Creative
</button>
</div>
</div>
</div>
</div>
<div >
<div data-number="1" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
<div data-number="2" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
<div data-number="3" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</div>CodePudding user response：
Since you have your answer here's an alternative example.
Instead of attaching listeners to all the buttons use 
const questions = document.querySelectorAll(".btn2");
const answers = document.querySelectorAll(".answer");
const schools = document.querySelectorAll(".btn3");
questions.forEach((question) => {
question.addEventListener("click", (e) => {
const et = e.target;
const activeBtn = document.querySelector(".active");
if (activeBtn) {
activeBtn.classList.remove("active");
}
et.classList.add("active");
answers.forEach((answer) => {
if (
answer.getAttribute("data-number") ===
question.getAttribute("data-number")
) {
answer.style.display = "block";
} else {
answer.style.display = "none";
}
})
});
});
/*************************Browse Courses**********************/
schools.forEach((school) => {
// not data-id
let test = school.getAttribute("data-number");
console.log(test);
})<body>
<div >
<div >
<button data-number="1" >
<h5>
What Are Coding Bootcamps?
</h5>
<i ></i>
</button>
<button data-number="2" >
<h5>
How Do Coding Bootcamps Work?
</h5>
<i ></i>
</button>
<button data-number="3" >
<h5>How Do I Choose My Tech Carrer Path?</h5>
<i ></i>
</button>
<button data-number="4" >
<h5>
How Long Are The Nest Academy Coding Bootcamps?
</h5>
<i ></i>
</button>
<button data-number="5" >
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<i ></i>
</button>
</div>
<div data-number="1">
<p>
<h5>
What Are Coding Bootcamps?
</h5>
<p>
Coding bootcamps are short, intensive training coding programs and tech courses that give students the skills they need for new careers in technology. Programming bootcamps and code schools like BrainStation have become an increasingly popular alternative
to a four-year computer science degree, allowing students to gain real-world experience under the instruction of top industry professionals. While "coding bootcamps" as a term has come to be used for digital skills training across disciplines,
including courses and programs relating to web development, software development, data science, UX design, and digital marketing, the term originally was meant to describe short-term, intensive training programs in full-stack web development,
software development, or software engineering. As one of the best coding bootcamps, BrainStation provides hands-on, project-based learning, allowing students with no prior experience to learn how to use programming languages like HTML, CSS,
JavaScript, Python, SQL, and more. The goal of our coding bootcamps is to prepare you for a new career in web development, software development and engineering, data science, design, security, digital marketing, or related tech fields. To that
end, bootcamp graduates also benefit from ongoing, personalized career services meant to provide guidance and support during the job search.
</p>
</p>
</div>
<div data-number="2">
<p>
<h5>
How Do Coding Bootcamps Work?
</h5>
<p>
Coding bootcamps work by giving students hands-on experience with the key programming languages, knowledge areas, and technical skills needed for a career in technology. The best coding bootcamps are taught by experienced professionals who know what employers
are looking for. Many bootcamp students are looking to change careers, so the best bootcamps help with the job search, including career services, a network of hiring partners, and opportunities to build professional networks through events and
guest lectures. Ultimately, coding bootcamp students learn the skills and develop the project portfolio necessary to land a job in web and software development, software engineering, data science, UX design, digital marketing, or other tech
fields.
</p>
</p>
</div>
<div data-number="3">
<p>
<h5>
How Do I Choose my Tech Career Path?
</h5>
<p>
When trying to determine your tech career path, the first step is to understand where your interests and passions truly lie. Do you have a good sense of computer science fundamentals? Are you excited about the idea of building a website? Take a look at
full-stack web development and the kinds of careers you can have after taking a web development bootcamp. Are you good with numbers and like identifying trends (that would have remained hidden)? A career in data science might be for you. Asking
yourself questions like these will help guide your job search and the kind of training you need. From there, take stock of the skills and experience you currently have – whether or not they are in computer science. Is there any overlap with
skills that are most in demand? Does your education and professional experience lend itself to an emerging field like data science, software, development, or digital marketing?
</p>
</p>
</div>
<div data-number="4">
<p>
<h5>
How Long Are BrainStation's Coding Bootcamps?
</h5>
<p>
BrainStation's coding bootcamps generally take three months to complete on a full-time basis — 12 weeks. In that time, you will develop a comprehensive understanding of web development, data science, user experience design, or digital marketing fundamentals,
and learn how to apply these new skills and knowledge. BrainStation bootcamps are immersive and project-based, allowing you to build a portfolio of completed projects by the end of the bootcamp. For students seeking more flexibility, BrainStation
also offers part-time bootcamps, which are completed over eight months.
</p>
</p>
</div>
<div data-number="5">
<p>
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<p>
Tuition for full-time coding bootcamps can vary depending on the field of study, the location of the campus, the method of study chosen (online or in-person), or how comprehensive the course is. Some programming bootcamps and code schools could be relatively
inexpensive or quick to complete, but might not cover the full range of skills and competencies needed, especially for students interested in full-stack web development.
</p>
</p>
</div>
</div>
<div >
<div >
<div ></div>
<div >
<div >
<button data-number="1" >
Tech
</button>
<button data-number="2" >
Enter
</button>
<button data-number="3" >
Creative
</button>
</div>
</div>
</div>
</div>
<div >
<div data-number="1" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
<div data-number="2" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
<div data-number="3" >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</div>
</body>