Объединить массивы и вывести в HTML

$let_category = ['Пицца', 'Роллы',  'Сеты', 'Горячие блюда', 'Салаты', 'Бизнес-ланч', 'Супы', 'Закуски', 'Десерты', 'Хлеб', 'Детское меню', 'Напитки', 'Гарниры',];
$let_slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads', 'business-lunch', 'soups', 'snacks', 'desserts', 'bread', 'child-menu', 'drinks', 'garnishes',];
echo count($let_category) . ' ' . count($let_slug_id);
$nav = '<nav class="container">';
for ($i = 0; $i < count($let_category); $i++) {
    $nav .= "<button class=\"btn-menu ripple-btn\" category=\"{$let_slug_id[$i]}\">{$let_category[$i]}</button>" . PHP_EOL;
}
$nav .= '</nav>';

echo $nav;
<nav class="container"><button class="btn-menu ripple-btn" category="pizza">Пицца</button>
    <button class="btn-menu ripple-btn" category="rolls">Роллы</button>
    <button class="btn-menu ripple-btn" category="sets">Сеты</button>
    <button class="btn-menu ripple-btn" category="hot-dish">Горячие блюда</button>
    <button class="btn-menu ripple-btn" category="salads">Салаты</button>
    <button class="btn-menu ripple-btn" category="business-lunch">Бизнес-ланч</button>
    <button class="btn-menu ripple-btn" category="soups">Супы</button>
    <button class="btn-menu ripple-btn" category="snacks">Закуски</button>
    <button class="btn-menu ripple-btn" category="desserts">Десерты</button>
    <button class="btn-menu ripple-btn" category="bread">Хлеб</button>
    <button class="btn-menu ripple-btn" category="child-menu">Детское меню</button>
    <button class="btn-menu ripple-btn" category="drinks">Напитки</button>
    <button class="btn-menu ripple-btn" category="garnishes">Гарниры</button>
</nav>

тоже самое и на js и все