How to iterate a few elements with loops in JavaScript?

I'm making an FAQ section.

The goal is pretty simple: click the question to open the answer and then click the question again to close the answer.
At the meantime, the "+" and "-" toggles.

I made it work for the first question, but I don't knonw how to iterate it with loops.
I tried to for loop, but failed.

Can someone help?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let questionContainer1 = document.querySelector('#question-container-1');
let question1          = document.querySelector('#question-1');
let btn1               = document.querySelector('#btn-1');
let answer1            = document.querySelector('#answer-1');

let buttonSwitch = false;

function toggle() {
  answer1.classList.toggle('toggle-style');
  question1.classList.toggle('toggle-question-style');
  if (buttonSwitch === false) {
    console.log("false");
    btn1.innerHTML = "-";
    buttonSwitch = true;
  } else if (buttonSwitch = true) {
    console.log("true");
    btn1.innerHTML = '+';
    buttonSwitch = false;
  }
}

questionContainer1.addEventListener('click', toggle);

<!-- language: lang-css -->

.FAQ-container {
  position: absolute;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

h1 {
  margin: 0 auto;
  padding-bottom: 1rem;
  font-size: 20px;
  text-align: center;
}

.question-container {
  display: flex;
  justify-content: space-between;
  font-size: 1em;
  cursor: pointer;
}

hr {
  width: 100%;
}

.answer {
  font-size: .9em;
  margin: 0;
  margin-bottom: 2rem;
  display: none;
  transition: all 1s;
}

.toggle-style {
  display: block;
}

.toggle-question-style {
  font-size: .8em;
}

<!-- language: lang-html -->

<div class="FAQ-container">
  <h1>Frequently Asked Questions</h1>

  <div class="question-container" id="question-container-1">
    <div class="question" id="question-1">What is the return policy?</div>
    <div class="btn" id="btn-1">+</div>
  </div>
  <hr />
  <p class="answer" id="answer-1">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </p>

  <div class="question-container" id="question-container-2">
    <div class="question">When will I receive my order?</div>
    <div class="btn" id="btn-2">+</div>
  </div>
  <hr />
  <p class="answer" id="answer-2">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  </p>

  <div class="question-container" id="question-container-3">
    <div class="question">Where are you located</div>
    <div class="btn" id="btn-3">+</div>
  </div>
  <hr />

<!-- end snippet -->

To make your FAQ section dynamic and iterate through all the questions and answers, you can use a loop to add event listeners to each question container.

Write your script as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Get all the question containers
let questionContainers = document.querySelectorAll('.question-container');

// Loop through each question container and add an event listener to toggle the answer
questionContainers.forEach((container) => {
  let question = container.querySelector('.question');
  let btn = container.querySelector('.btn');
  let answer = container.nextElementSibling;

  let buttonSwitch = false;
  function toggle(){
    answer.classList.toggle('toggle-style');
    question.classList.toggle('toggle-question-style');
    if(buttonSwitch === false){
      
      btn.innerHTML = "-";
      buttonSwitch = true;
    } else if (buttonSwitch === true) {
      
      btn.innerHTML = '+';
      buttonSwitch = false;
    }
  }

  container.addEventListener('click', toggle);
});

<!-- end snippet -->

You don't have to create so many variables but you can query all the elements and add the same event listener to each of them.

Please note that I wrapped the questions and answers in a container called .question

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelectorAll('.question-container')
  .forEach((e) => e.addEventListener('click', toggle));

function toggle(event) {

  const questionContainer = event.currentTarget.parentElement;
  const question = event.currentTarget;
  const answer = questionContainer.getElementsByClassName('answer')[0];
  const btn = question.getElementsByClassName('btn')[0];
  
  answer.classList.toggle('toggle-style');
  question.classList.toggle('toggle-question-style');
  
  if (btn.innerHTML === '+') {
    btn.innerHTML = "-";
  } else {
    btn.innerHTML = '+';
  }
}

<!-- language: lang-css -->

.FAQ-container {
  position: absolute;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

h1 {
  margin: 0 auto;
  padding-bottom: 1rem;
  font-size: 20px;
  text-align: center;
}

.question-container {
  display: flex;
  justify-content: space-between;
  font-size: 1em;
  cursor: pointer;
}

hr {
  width: 100%;
}

.answer {
  font-size: .9em;
  margin: 0;
  margin-bottom: 2rem;
  display: none;
  transition: all 1s;
}

.toggle-style {
  display: block;
}

.toggle-question-style {
  font-size: .8em;
}

<!-- language: lang-html -->

<div class="FAQ-container">
  <h1>Frequently Asked Questions</h1>

  <div class="question">
    <div class="question-container" id="question-container-1">
      <div class="question" id="question-1">What is the return policy?</div>
      <div class="btn" id="btn-1">+</div>
    </div>
    <hr />
    <p class="answer" id="answer-1">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
  <div class="question">
    <div class="question-container" id="question-container-2">
      <div class="question">When will I receive my order?</div>
      <div class="btn" id="btn-2">+</div>
    </div>
    <hr />
    <p class="answer" id="answer-2">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </p>
  </div>
  <div class="question">
    <div class="question-container" id="question-container-3">
      <div class="question">Where are you located</div>
      <div class="btn" id="btn-3">+</div>
    </div>
    <hr />
    <p class="answer" id="answer-3">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </p>
  </div>

<!-- end snippet -->

You are cluttering up with way too many lines of code...

This is a typical use case for event delegation (widely explained on StackOverflow), whicth allow you to add as many questions/answers, without worrying about assigning unnecessary IDs to them.

I also added a feature to keep only one question/answer open at a time.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const
  d_FAQ_container = document.querySelector('div.FAQ-container')
, All_questions   = d_FAQ_container.querySelectorAll('.question-container')
  ;              //   ^--- only it childs
  
d_FAQ_container.addEventListener('click', f_toggle );

function f_toggle ( evt )
  {
  let elmRef = evt.target.closest('.question-container') || d_FAQ_container;
             //           ^--- check 4 this parent -^
             
  if (!elmRef.matches('.question-container') ) return; // exit for others...

  if (elmRef.classList.toggle('toggle-question-style') ) // this return a Boolean
    {
    // keep only one question/answer open at a time...
    All_questions.forEach( qElm =>
      qElm.classList.toggle('toggle-question-style', qElm === elmRef ));
    }                                              //      ^-- force
  }

<!-- language: lang-css -->

.FAQ-container {
  position       : absolute;
  width          : 60%;
  top            : 50%;
  left           : 50%;
  transform      : translate(-50%, -50%);
  border         : solid 1px;
  display        : flex;
  flex-direction : column;
  padding        : 1rem;
  }
h1 {
  margin         : 0 auto;
  padding-bottom : 1rem;
  font-size      : 20px;
  text-align     : center;
  }
div.question-container {
  display         : flex;
  justify-content : space-between;
  font-size       : 1em;
  cursor          : pointer;
  }
div.question-container.toggle-question-style {
  font-size : .8em;
  }
div.question-container > div.btn::before {
  content : '+';
  }
div.question-container.toggle-question-style > div.btn::before {
  content : '-';
  }
hr {
  width : 100%;
  }
p.answer {
  font-size      : .9em;
  margin         : 0;
  margin-bottom  : 2rem;
  transition     : all 1s;
  }
div.question-container:not(.toggle-question-style) + hr + p.answer {
  display : none;
  }

<!-- language: lang-html -->

<div class="FAQ-container">
    <h1>Frequently Asked Questions</h1>

    <div class="question-container" > <!-- no needs to use ID -->
      <div class="question">What is the return policy?</div>
      <div class="btn"></div>  <!-- use css ::before to add '+' or '-' -->
    </div>
    <hr>
    <p class="answer">  <!-- no needs to use ID -->
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </p>
  
    <div class="question-container" >
      <div class="question">When will I receive my order?</div>
      <div class="btn"></div>
    </div>
    <hr>
    <p class="answer">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </p>
  
    <div class="question-container" >
      <div class="question">Where are you located</div>
      <div class="btn"></div>
    </div>
    <hr>
    <p class="answer" >
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </p>
  </div>

<!-- end snippet -->