Алексей

const addingOptions = arr => Promise.all(arr.map(
    item => Promise.all([
        fetchOptions(item.id),
        item.children.length ? addingOptions(item.children) : []
    ]).then(([options, children]) => ({
        ...item,
        options,
        children
    }))
));

async function addOptions(arr) {
  const result = [];

  for (const item of arr) {
    result.push({
      ...item,
      options: await fetchOptions(item.id),
      children: await addOptions(item.children),
    });
  }

  return result;
}

function createTree(data, defaultId, parentIds = '') {
  const ul = document.createElement("ul");

  data.map((item, index) => {
    const li = document.createElement("li");
    const id = [parentIds, item.id].join('_')
    li.textContent = id;

    if (item.children) {
      li.appendChild(createTree(item.children, index, id));
    }

    ul.appendChild(li);
  });

  return ul;
}

Пусть второй параметр будет массивом индексов, по умолчанию - пустой (соответственно, когда вызываете функцию сами, его передавать не надо). В начале обработки элемента данных кладёте его индекс в массив, после обработки убираете. Ну а текст - собираете из массива какой вам нужен:

const createTreeElement = (data, index = []) =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n, i) => (
        index.push(i),
        ul.append(document.createElement('li')),
        ul.lastChild.append(index.join('_'), createTreeElement(n.children, index)),
        index.pop(),
        ul
      ), document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

Или, делаем второй параметр строкой. Как и массив из предыдущего варианта, по умолчанию пуста, указывать при самостоятельном вызове не надо. При обработке элемента массива собираем новую строку, состоящую из переданной в функцию и индекса:

const createTreeHTML = (data, index = '') =>
  data instanceof Array && data.length
    ? `<ul>${data.map((n, i) => `
         <li>
           ${(i = index + (index && '_') + i)}
           ${createTreeHTML(n.children, i)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

На самом деле можно и без изменения разметки

Класс или свойство?
Если класс то

document.getElementbyId('box').classList.add("border");

Если свойство то

document.getElementbyId('box').style.border= "1px solid red";

https://miloshsk.github.io/bikes/ - здесь кнопка меню (в правом верхнем углу) не работает при ширине меньше 710 пикселей
https://miloshsk.github.io/quotes/ - здесь шрифты не подъехали в блоке Free PSD Template (отображается Arial и вряд ли так задумано, да и сам заголовок блока называется temlate вместо template)
https://miloshsk.github.io/ - здесь форма Связаться со мной кидает на страницу 404. Хорошо, она не должна ничего никуда отправлять, возможно. Но на фронтэнде можно же показать пользователю красивую плашку с какой-то демо-надписью
https://miloshsk.github.io/ - в блоке Инфо вроде как три колонки текста при большом разрешении, но первая и вторая прилипли друг к другу.

Например, такие моменты.

Независимо от вёрстки, я бы посоветовал обращать внимание на контент страниц (аккуратность, опечатки), если собираешься отдавать кому-то для просмотра.

code_s - не Code_S
соблюдайте регистр символов
и выкиньте уже mysql_*
этому старью надо на упокой
только mysqli_* или pdo_