Стас Хитрич

Используйте WebWorker и вынесите туда всю логику по формированию виртуального дом, а когда сформируете перебором нужную строку, верните всё в основной скрипт и вставьте разом. Таким образом страница не будет подвисать из-за расчетов и уж тем более не следует в цикле менять DOM, 1 раз формируется, 1 раз вставляется.

С джумлой мало знаком, но думаю принцип один будет. Напрямую из скрипта вы письмо не отправите. Прочитайте как делать запросы ajax из js к пхп файлу на своем сервере или возможно есть у джумлы готовое решение. В целом у пхп есть много решений готовых по отправке писем.

Преобразуйте объект в строку с помощью json.stringify и передавайте значение как строку, а потом где надо преобразовывайте обратно

О какой сетке речь?
Если речь о сетках по типу бутстрапа для колонок и строк, то на сайте нет ничего такого и там просто в CSS всё прописано. Строка flex row, колонка flex column и ограничение максимальной ширины.

У вас есть некий ответ, если это JSON, то его сначала надо распарсить с помощью JSON.parse и превратить в данные с которыми JS сможет работать. После этого дело за малым, если это объект, то обращаетесь напрямую к значению: "response.online" или "response['online']". Если это массив, то перебор + вот примерное решение вашей задачи с отправкой данных в див по ID:

const response = [{}, {}, {}];
response.forEach((item, idx) => {
   const div = document.getElementById(`div-${idx}`);
   div.innerHTML = item.online;
})

Вот небольшой пример в песочнице с использованием старого JavaScript.
Ссылка на песочницу
Вешать на каждый элемент списка не советую, ведь их может быть очень много и это плохо отразится на производительности, поэтому существует такая вещь как делегирование события, это когда мы вешаем 1 слушатель на родительский элемент и проверяем где сделан клик. В примере из песочницы именно так и сделано.