Loop on multiple values - php

Question

I got a FAQ element in which I want to show questions and answers. I am using the joomla cms template to edit so I am fairly limited on how to add this.
My solution on how I wanted to do this:
In the textfield I add the string like this:
[question1? || Answer1]
[question2? || Answer2]
[question3? || Answer3]
Then I split the questions/answers on the brackets around them, and finally split those results on the two lines inbetween.
Then finally loop the results in this format:
<div id="accordion-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="heading1">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion-1" href="#collapse1" aria-expanded="true" class=""><span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-rocket"></i></span></span>Question 1</a></h5>
</div>
<!-- LOOP FROM HERE -->
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1" style="height: auto;">
<div class="panel-body">Answer 1</div>
</div>
<div class="panel-heading" role="tab" id="heading2">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse2" aria-expanded="false"><span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-quote-left"></i></span></span>Question 2</a></h5>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" style="height: 0px;">
<div class="panel-body">Answer 2</div>
</div>
<div class="panel-heading" role="tab" id="heading3">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse3" aria-expanded="false">Question 3<span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-flag"></i></span></span></a></h5>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" style="height: 0px;">
<div class="panel-body">Answer 3</div>
</div>
<!-- -->
</div>
</div>
I split the parts like this:
// faq data
$faq = "SELECT * FROM `web_content` WHERE catid = 13 AND `alias` = '".$conn->real_escape_string($_GET['alias'])."' AND state = 1 ORDER BY ordering";
$faqcon = $conn->query($faq);
$faqcr = array();
while ($faqcr[] = $faqcon->fetch_array());
$faqtext = $faqcr[0]['introtext'];
preg_match_all("/\[([^\]]*)\]/", $faqtext, $faqarray);
How can I get the question and answer seperate and loop them for example like this:
<div class="panel-heading" role="tab" id="heading3">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse3" aria-expanded="false">'.$question[0].'<span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-flag"></i></span></span></a></h5>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" style="height: 0px;">
<div class="panel-body">'.$answer[0].'</div>
</div>
I know I have to add numbers to the accordion element but that is not an issue.