Логика вывода данных.

Приветствую. Нужно вывести данные их двух таблиц, и показать в виде табов бутстрап 3
выглядят они так:

HTML:

1.  
2. <!-- Nav tabs -->
3.   <ul class="nav nav-tabs">
4.     <li class="active"><a href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
5.     <li><a href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
6.     <li><a href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
7.     <li><a href="#settings" aria-controls="settings" data-toggle="tab">Settings</a></li>
8.   </ul>
9.  
10.   <!-- Tab panes -->
11.   <div class="tab-content">
12.     <div class="tab-pane active" id="home">Home text</div>
13.     <div class="tab-pane" id="profile">Profile text</div>
14.     <div class="tab-pane" id="messages">Messages text</div>
15.     <div class="tab-pane" id="settings">Settings text</div>
16.   </div>
17.  

У меня две таблицы: первая с категориями, вторая с подкатегориями.
Первая таблица такая: id, category
Вторая таблица такая: id, cid, subcat

Из первой таблицы наверно можно сделать навигацию.
А из второй оставшуюся часть.
Вместо "Home text", "Profile text" и тд, цикл который выводит все данные из второй таблицы по категориям.
И нужно все загнать в переменную, чтобы вывести в шаблон
Как такое реализовать?

 

Спасибо за желание помочь, но я уже разобрался) Теперь новая засада

 

JS не работает в модальных окнах бутстрап, или работает, но я не знаю как использовать)

 

тем не менее хочется чтоб работало)

 

и при этом всем, на странице работает, а вот в "таких же div-ах" нет