循环多个值

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.