Print Bootstrap 3 Tabs Component using only one foreach Loop I'm using Bootstrap 3 to build a tab-panel component, based on information coming from the end-user. I don't like how there's a second foreach loop, but I don't know how else to print the HTML correctly.

Given an array structured like this:

[
    {
        "title": "Title 1",
        "content": "Lorem Ipsum"
    },
    {
        "title": "Title 2",
        "content": "Lorem Ipsum"
    }
]


And a "view" template structured like this:

&lt;?php $panels = rwmb_meta("ssc_tabpanels") ?&gt;
&lt;?php if( !empty($panels) ): ?&gt;
    &lt;div id="program-details"&gt;
        &lt;ul class="nav nav-pills nav-stacked" role="tablist"&gt;
            &lt;?php foreach($panels as $i =&gt; $p): ?&gt;
            &lt;li role="presentation"&gt;
                &lt;a href="#tab-&lt;?php echo $i ?&gt;" data-toggle="tab"&gt;&lt;?php echo $p['title'] ?&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;?php endforeach; ?&gt;
        &lt;/ul&gt;

        &lt;div class="tab-content"&gt;
            &lt;?php foreach($panels as $i =&gt; $p): ?&gt;
            &lt;div class="tab-pane" id="tab-&lt;?php echo $i ?&gt;"&gt;&lt;?php echo $p['content'] ?&gt;&lt;/div&gt;
            &lt;?php endforeach; ?&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;?php endif; ?&gt;


What suggestions do you have for removing the second foreach loop while still maintaining the correct bootstrap code?
One way would be to build the value of the tab contents in a variable during the first loop, and just print it once the loop ends.  I have not written PHP in a while nor tested this code, so use as reference.

&lt;?php $panels = rwmb_meta("ssc_tabpanels") ?&gt;
&lt;?php $tabContentHtm = ''; ?&gt;
&lt;?php if( !empty($panels) ): ?&gt;
&lt;div id="program-details"&gt;
    &lt;ul class="nav nav-pills nav-stacked" role="tablist"&gt;
        &lt;?php
        //build the tabs    
        foreach($panels as $i =&gt; $p):
        ?&gt;
        &lt;li role="presentation"&gt;
            &lt;a href="#tab-&lt;?php echo $i ?&gt;" data-toggle="tab"&gt;&lt;?php echo $p['title'] ?&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;?php
        // build content displayed on click of each tab
        $tabContentHtm .= '&lt;div class="tab-pane" id="tab-'. $i .'"&gt;'. $p['content'] .'&lt;/div&gt;\r\n';
        endforeach; 
        ?&gt;
    &lt;/ul&gt;

    &lt;div class="tab-content"&gt;
        &lt;?php echo $tabContentHtm; ?&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;?php endif; ?&gt;


The rendered code should look something like this

&lt;div id="program-details"&gt;
    &lt;ul class="nav nav-pills nav-stacked" role="tablist"&gt;
        &lt;li role="presentation"&gt;
            &lt;a href="#tab-1" data-toggle="tab"&gt;Title 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role="presentation"&gt;
            &lt;a href="#tab-2" data-toggle="tab"&gt;Title 2&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane" id="tab-1"&gt;Lorem Ipsum of Title 1&lt;/div&gt;
        &lt;div class="tab-pane" id="tab-2"&gt;Lorem Ipsum of Title 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;