Как передать в функцию рендера html несколько массивов?

Спасибо, абсолютно то что мне нужно. Постараюсь разобраться в вашем коде и понять его.

Как передать в функцию рендера html несколько массивов?

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

Почему при использовании метода reduce, при первом событии возвращает initialValue?

Да действительно при первом клике у меня по какой то причине в консоли пустой массив currentTariff === [], хотя в хранилище уже имеется по факту currentTariff = [{name: "Bob"}]. Странный случай.

Как вывести в консоль text и value всех имеющихся option на странице?

Спасибо, а если мне нужно сформировать объект:

let data = {
    type: type,
    amount: amount,
  }

Как можно это реализовать? По сути должно получиться как то так:

data = {
  type: "one",
  amount: 1
}, {
  type: "two",
  amount: 3
}

Почему происходит sumbit по клику сразу после первой заполненной формы в не зависимости от количества форм?

Сергей, Я так понял что из за делегирования submit не хочет отрабатывать:
if (e.target.classList.contains('btn')) {}

Почему происходит sumbit по клику сразу после первой заполненной формы в не зависимости от количества форм?

Сергей, Подскажите почему не работает данный код?
https://jsfiddle.net/qym85h10/8/
Я понимаю что я отменяю действие submit с помощью e.preventDefault(), но всё же как сделать так чтобы код отработал с submit в слушателе?

Почему происходит sumbit по клику сразу после первой заполненной формы в не зависимости от количества форм?

imko, Добрый день, у меня одна на странице, а блоки с кнопками type="submit" дублируются, например 3 блока заполнения выглядят вот так:

<form action="">
  <div class="parent-block">
    <input type="text">
    <button class="btn" type="submit">click</button>
  </div>
  <div class="parent-block">
    <input type="text">
    <button class="btn" type="submit">click</button>
  </div>
  <div class="parent-block">
    <input type="text">
    <button class="btn" type="submit">click</button>
  </div>
</form>

Вы предлагаете писать слушатель на btn?
По поводу гадости. Не спорю всё возможно, но если критикуете, то будьте добры предлагайте.

Почему происходит sumbit по клику сразу после первой заполненной формы в не зависимости от количества форм?

Попробовал кнопку и type="button" и без типа вообще, всё равно после первой заполненной формы submit делает.

Как правильно переписать код с ajax jquery на fetch js?

Спасибо, вы ответили на мой вопрос.

Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Владимир, Кстати да, я упустил почему то этот момент. Всё заработало как надо, спасибо большое за помощь, хорошего вечера!

Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Владимир, 123 рендерится в корзине, но всё равно очищается при перезагрузке.

Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Владимир, Да, вот я с бэка получил такие данные, которые так же отрендерились в корзине. Код идентичный вашему, обобщенно такого вида:

$.ajax({
         url: urlTariffCalculationPassenger,
         method: "GET",
         data: TariffCalculationPassObj,
         success: function(result) {

           let res = 0;
           let sidebarItem = $('.sidebar-item')
           let tariffVal = $('#tariff-val')

           let sumPrice = parseInt(localStorage.getItem("price")) || 0;
           tariffVal.html(sumPrice)

           sidebarItem.each(item => {

             res += result.sum;

             localStorage.setItem("price", res);

             let sumPrice = parseInt(localStorage.getItem("price")) || 0;
             tariffVal.html(sumPrice)
           })
         }

При перезагрузке всё тот же 0 надоедливый.

Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Кэш очищал с помощью ctrl + f5, работаю одновременно на локалке и параллельно правлю на хостинге, пока не работает. Во всяком случае как я понял код в ajax в принципе должен отрабатывать правильно и всё же нужно смотреть в сторону кеша?

Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Сделал всё как у вас, в проекте всё равно не сохраняет данные из storage в разметке. В чем же может быть дело? Может из за того что это ajax оно как та неправильно отрабатывает.

Как отредактировать актуальные данные в localStorage по конкретному id в объекте?

Kotaro Hiba, Проект пишется на ванильном js. Я решил задачу, таким образом:

let newPassengersEdit = currentPassengers.map((item) => {
        if (item.PassengersId == passengerIdEdit.value) {
"какой то код"
        } 
   }

Я сравнил id пассажира из локального хранилища с id которое выводиться как value в скрытом инпуте, который появляется в случае редиректа.
Спасибо за внимание, вы мне тоже помогли додуматься до некоторых моментов.

Как отредактировать актуальные данные в localStorage по конкретному id в объекте?

Спасибо, я попробую по вашему примеру попрактиковаться. Еще хотел уточнить, как можно поступить в случае если id динамический? Например в данном методе:

const item = arr.find(i => i.id === 'записать выбранный(кликнутый) id из localStorage')

У меня как раз таки с этим трудности.

Как правильно организовать удаление объектов из двух массивов на основе одинакового ключа в localStorage?

Спасибо, я попробовал ваш вариант и получилось что то на подобии:

let idxPass = passengers.findIndex((p) =>
                        String(p.CabinCategoryID) ===
                        String(currentTariff[idxCabin].CabinCategoryID) );
                deleteState(idxCabin, idxPass);

function deleteState(index, idxPass) {
if (index > -1) {
                currentTariff.splice(index, 1);
                updateState();
}
if (idxPass > -1) {
            passDel = passengers.splice(idxPass, 1);
            localStorage.setItem("Passengers", JSON.stringify(passDel));
}
}

Удаление в принципе работает, но удаляет не правильно. Где может быть ошибка подскажите пожалуйста.

Как при отрисовке разметки по клику вывести только те значения объекта, которые больше 0?

Спасибо большое, очень лаконично и всё работает.