Denis

Привет

1. Работа в реальном времени обеспечивается при наличии хостинга

Чтобы бот срабатывал - это нужно делать WebHook

Не могу сделать точный вывод о вашем подходе, но, кажется, вы это через браузер делаете и исполняете локально JS. Да? Если да, то так не получится, вам нужен хостинг с поддержкой Node JS. Это если планируете разрабатывать на JS. Вот как это на NodeJS сделал человек

Также можете программировать бота на Python: aiogram; или PHP, Laravel: Telegraph

2.

function sendMessage(userId, text) {
    let url = `https://api.telegram.org/bot/sendMessage?chat_id=${userId}&text=${text}`;
     let xhr = new XMLHttpRequest();
     xhr.open('GET',url,false);
     xhr.send();
}

Обратите внимание на этот кусок кода, ещё более подробно:

let url = `https://api.telegram.org/bot/sendMessage?chat_id=${userId}&text=${text}`;

В параметрах есть `?chat_id=${}&text=ЭТОТ ТЕКСТ ОТПРАВЛЯЕТСЯ`
То, что указано около text - будет отправлено. Решение - убрать параметр из URI

чтобы бот не повторял то что уже написано,

Я вас не понял, у вас бот перебирает все сообщения и отправляет в ответ?
Или я уже ответил на этот вопрос?
Бот присылает только одно сообщение?

1. Получаем с сервера ответ от базы данных и храним на клиенте, например, в JSON

2. Когда юзер выбирает параметры, тогда фильтруем JSON и выводим на экран

Фича:
3. Когда юзер что либо делает, тогда получаем актуальную информацию из базы асинхронно

Доп:
Если будете делать в разных модулях, может пригодиться: глобальные переменные, объекты

Асинхронность можно сделать через XHR

Вы ошибаетесь, это не fixed.
Это position:sticky

JS уберите, он ломает поведение.

section{
  width:50%;
  height:1000px;
  margin: 0 auto;
  background: linear-gradient(to top, #fefcea, #000);
}

p {
  margin: 0;
  border-bottom: 1px solid #000;
  padding-top: 10px;
  padding-bottom: 10px;
}
p:hover {
  cursor: pointer;
  background: red;
}
.api-nav {
  transform: translateX(-110%);
  background-color: aqua;
  text-align: center;
  position: sticky;
  width:100px;
  min-height: 100px;
  margin: 0; padding: 0;
  top: 0;
}

Самый лучший вариант отработки материала - создать сайт знакомому.

Вот он попросит сделать "карусель" на сайте, и если ты достаточно упорный, то найдёшь инфу и получишь +XP

Посмотри как верстать Email-письма :)

Подтяни PHP. Просто базовый уровень, остальное будешь учить в работе и практике.