<div class="container">
  <h4 id="question"></h4>
  <div id="answers"></div>
</div>

const quest = getQuest();
let cursor = "1";
const el = {
  question: document.querySelector('#question'),
  answers: document.querySelector('#answers'),
};

el.answers.addEventListener('click', ({ target }) => {
  if (target.tagName !== 'BUTTON') return;
  cursor = target.dataset.next;
  render();
});

const render = () => {
  const { question, answer1, answer2 } = quest[cursor];
  el.question.innerText = question;
  el.answers.innerHTML = '';
  [answer1, answer2].forEach(answer => {
    const button = document.createElement('button');
    button.classList = 'btn btn-primary me-2';
    button.innerText = answer.text;
    button.dataset.next = answer.next_question;
    el.answers.appendChild(button);
  });
};


render();



function getQuest() {
  return {
    "1":{
        "question": "Путешествуете ли вы?",
        "answer1":{
            "text": "Да",
            "next_question": "2"
        },
        "answer2":{
            "text": "Нет",
            "next_question": "3"
        }
    },
    "2":{
        "question": "Сколько раз в году вы бываете в других странах?",
        "answer1":{
            "text": "1-2",
            "next_question": "4"
        },
        "answer2":{
            "text": "Больше",
            "next_question": "5"
        }
    },
    "3":{
        "question": "Планируете заняться путешествием?",
        "answer1":{
            "text": "Да",
            "next_question": "6"
        },
        "answer2":{
            "text": "Нет",
            "next_question": "7"
        }
    },
  };
}