Как иметь динамические вкладки начальной загрузки в цикле foreach

У меня есть цикл foreach. Я хочу показать результат каждого значения в отдельной вкладке. Поэтому вкладки нужно создавать динамически.

Я хочу просмотреть результаты запроса по одному на своей вкладке. Чем у меня есть следующая кнопка, чтобы перейти к следующей вкладке.

Поэтому по умолчанию я вижу первое значение. Когда я нажимаю «Далее», я должен перейти на следующую вкладку, где будет показано следующее значение и так далее.

Вот мой код

<div class="container">
<ul class="nav nav-tabs tabbs">
<div class="tab-content">
<?php
$colors = array("red", "green", "blue", "yellow");

$x = 1;
foreach ($colors as $value) { ?>
<li class="active"><a data-toggle="tab" href="#<?php echo $x; ?>"><?php echo $x; ?></a></li>
<div id="<?php echo $x; ?>" class="tab-pane fade in active">
Hello <?php echo $x; ?>
<button>Next</button>

</div>
<?php
$x++;
}
?>
</div>
</ul>
</div>

<script>
$(document).ready(function() {
$('.tabbs a:first').tab('show')
});
</script>

Как я могу создать динамическую вкладку для каждого цикла, так что один результат для одной вкладки, чем следующая вкладка для перехода по следующей.

Заранее спасибо.