Здраствуйте, недавно начал изучать JavaScript и столкнулся в проблемой

Как можна реализовать динамическое изменение контента (3 контейнера с инфой про продукт на скрине ниже) при изменении соответсвествующего пункта в навигации (на скрине пункт: бургер, хот дог, шаурма и тд)

Фрагмент кода где я делал функционал для пунктов:

const navigationRadioElements = document.querySelectorAll('.navigation-item');
const radioElements = document.querySelectorAll('[data-jd-radio]');

radioElements[0].value = 'on';
navigationRadioElements[0].style.backgroundColor = '#FFAB08';

radioElements.forEach((el) => {
    el.value = 'off';
});

radioElements.forEach((el, index) => {
    el.addEventListener('change', () => {

        radioElements.forEach(r => r.value = 'off');
        el.value = 'on';
        navigationRadioElements.forEach(btn => btn.style.backgroundColor = '');
            navigationRadioElements[index].style.backgroundColor = '#FFAB08'; 
    });
});

radioElements.forEach((el) => {
    
}) 

Дожлжно бить так, нажимаешь на хот-доги появляется вместо бургеров хот доги как на скрине и так дале(была идея создать обьект с данными но что то после создание не знал что делать)