Алексей Уколов

Во-первых, вы пытаетесь искать дочерние чекбоксы внутри родительского элемента. Их, естественно, там быть не может.
Во-вторых, вы зачем-то прибавляете к id _ и элемент не находится.

Вам нужно дочерним чекбоксам добавить data-атрибут с id родителя и работать с ним - при смене состояния родителя искать все элементы, где его id указан в data-атрибуте (через обычный querySelectorAll на документе), при смене состояния ребёнка искать родителя по значению из data-атрибута.

projectPath[projectName].url

Изучите основы языка: https://learn.javascript.ru/object#kvadratnye-skobki

Это не официальная документация.
И в ней чётко написано, что «должна выполняться» — это соглашение, а сама такая функция во всём аналогична обычной (потому что она и является обычной функцией).

Да, этот дейтпикер берёт всегда короткую запись месяцев из moment: daterangepicker.js#L80

Но вы можете передать в настройках свой объект с названиями месяцев: daterangepicker.js#L140-L141
Брать его можно из того же moment по аналогии.

Должно сработать нечто подобное (раз уж в тегах JS указан):

function dataDebug($data, $flag = false)
{
    echo '<div class="debug-entry">';
    echo '<pre>';
    if (!$flag) {
        print_r($data);
    } else {
        var_dump($data);
    }
    echo '</pre>';
    echo '</div>';

    echo <<<JS
    <script>
    if (!window.debug_entries_moved) {
        window.debug_entries_moved = true;
    
        const $container = document.createElement(`div`);
        $container.classList.add(`mc__debugger`);
    
        [...document.querySelectorAll(`.debug-entry`)].forEach(($entry) => {
            $container.appendChild($entry);
        });
    
        document.body.appendChild($container);
    }
    </script>
    JS;
}

Во втором случае функцию в data вы не вызываете:
data().init

Вы получаете значение span один раз при запуске скрипта и туда попадает первый span первого div.
Вам же нужно при клике брать span внутри кликнутого элемента:

div.addEventListener('click', function(e) {
    let span = this.querySelector('span');

    set.add(this.textContent); 
    let arr = [...set];
    el1.textContent = arr.join(', ');
    
    sum += +span.textContent;
    console.log(span.textContent);
    el2.textContent = sum;
})

Array.from(CarStore.cars).map(([key, car]) => <Text key={key}>{car.name}</Text>);

[value.language]: i

Вы ничего не считаете, а записываете индекс элемента в массиве. Си у вас идёт в нулевом элементе, вот и получается 0.

Не совсем понятно, что именно вам нужно сохранять и что именно не работает.
Временное состояние формы, чтобы пользователь мог закрыть страницу, не отправляя изменения на сервер, и вернуться к ней позже? Или прям полноценное редактирование?

Если второе, то это и должно храниться на сервере. Или у вас при открытии формы поля формы не заполняются значениями из БД и она пуста? Тогда это отдельная проблема, не имеющая никакого отношения к JS.

Если же первое, то у вас, как я понял, уже есть какой-то скрипт, только он багованный - показывайте, мы вам поможем разобраться.

Ведь мы создаем новый li при клике на btn, и он попадает в DOM

Ну да, попадает. А чтобы что-то с ним делать, нужно навесить обработчик события. Совершенно непонятно, что вас в этом процессе удивляет.
Вы можете делегировать обработку события родительскому контейнеру (<ol />) и тогда навешивать отдельные обработчики на создаваемые элементы не придётся.

1. Получаем все нужные td, используя querySelectorAll.
   
2. Получаем для каждой ячейки значение (видимо, из инпута?).
   
3. Приводим значение к числу.
   
4. Прибавляем получившееся число к сумме.
   

Какой конкретно из этих элементарных пунктов вызывает у вас сложности? В чём эти сложности заключаются? Какой код у вас получился на данный момент?

https://learn.javascript.ru/async

- indexToHeaderList = String(headerArr[choosenElem]);
+ indexToHeaderList = headerArr[choosenElem].innerText;

Возможно, вместо innerText вам больше подойдёт textContent (но вряд ли).

оператором typeof - пишет что это строка

Ну так вы же по-любому на typeof проверяли после того как сами руками к строке привели?

Какого-то стандартного универсального retry у промисов, вроде, нет.
Поэтому можно использовать что-то подобное:

let runWithRetry = async (func, tries = 5) => {
    let attempt = 1;
    while (attempt <= tries) {
        try {
            return await func();
        } catch (error) {
            console.log(`Attempt #${attempt} failed: ${error}`);
            attempt++;
        }
    }

    throw new Error(`Failed after ${tries} tries`);
};

try {
    let busyWork = () => new Promise((resolve, reject) => {
        setTimeout(() => (Math.random() > 0.75 ? resolve(Math.random()) : reject()), 1000);
    });

    let result = await runWithRetry(busyWork, 5);

    console.log(result);
} catch (error) {
    console.error(error);
}

смогут ли они таким макаром выполнить все эти команды?

Если у вас какая-нибудь дыра, которую они эксплуатируют, открыта, то смогут. Но вероятность этого не очень велика. Обновляйтесь вовремя и следуйте основным инструкциям по безопасности для ваших инструментов.

Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность.
Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA.

В представленной песочнице это может выглядеть примерно так:

.nav ul li a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .1em;
}

const $links = document.querySelectorAll('.nav a');

Array.from($links).forEach(($link) => {
  $link.addEventListener('click', (event) => {
    document.querySelector('.nav a.active')?.classList.remove('active');
    event.target.classList.add('active');
  })
});

history.pushState({}, '', '/www?' + $(this).serialize());

https://developer.mozilla.org/en-US/docs/Web/API/H...