Andy Koshman

потому что считывается прайс при рендере и нет актуального значения при удалении

function removeItem(e) {
  if (e.target.classList.contains("close")) {
    let price = JSON.parse(localStorage.getItem("price") || "[]"); 
    let sumAfterRemove = price.reduce((acc, curr) => acc + curr.price, 0); //пересчет суммы
    localStorage.setItem("price", JSON.stringify(price)); //перезапись объектов 
//клик на отрисованный объект до перезагрузки страницы, например 
//было 2 объекта остался пустой массив, а после перезагрузки страницы удаляет правильно 
//(было 2 объекта и при клике на Х остаётся 1 объект в массиве )
    localStorage.setItem("sumPrice", JSON.stringify(sumAfterRemove)); //перезаписываю сумму
    getSumPriceToRender(); //рендерю в разметку текущий результат суммы
  }
}

// вместо
    price = price.filter(
      (i) => i.id !== id
    );

// попробуйте
  const priceIndex = price.findIndex(({ id: priceId }) => priceId === id);
  if (priceIndex > -1) price.splice(priceIndex, 1);

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

как представляете себе различие между строкой и числом в GET-параметрах URL?
https://example.com/api/method?NUM=123&STR=abc

Так-то метод URLSearchParameters.get() всегда возвращает строку, или null.

Это на бэке пусть чинят, что сломали )

присутствует кодировка %5B%5D которую ajax запрос видимо с помощью своей магии добавил в url.

Это квадратные скобки, которые скорее всего говорят о нескольких инпутах с одним именем. Ну или данные в переменой - массив. Обычный url encode.

В fetch же кодировка не имеется и я получаю статус 500.

Стоит посмотреть ошибку, которая отдается с сервера.

Подскажите пожалуйста как можно решить задачу.

Неплохо бы зайти в инструменты разработчика и сравнить нетворк запросы от "аякса" и фетч, в частности как выглядит пэйлоад. Тогда будет понятно куда копать, хотя серверная ошибка и так должна по идее дать ответ.

[
  [     '.btn-all', 'click',   onGetDataClick ],
  [ '.elem button', 'click', onPlusMinusClick ],
  [      '.amount', 'input',    onAmountInput ],
].forEach(([ selector, type, handler ]) => {
  document.querySelectorAll(selector).forEach(n => n.addEventListener(type, handler));
});

function onGetDataClick(e) {
  const data = Array.prototype.flatMap.call(
    e.target.closest('.child-block').querySelectorAll('.elem'),
    n => Array(+n.querySelector('.amount').value).fill(+n.dataset.id)
  );

  console.log(data);
}

function onPlusMinusClick({ target }) {
  const input = target.closest('.elem').querySelector('.amount');
  input.value -= target.innerText === '+' ? -1 : 1;
  input.dispatchEvent(new Event('input'));
}

function onAmountInput({ target: t }) {
  t.value = Math.max(t.min, Math.min(t.max, t.value | 0));
}

Собрать промежуточный словарь, где ключи – id, а значения – массивы имён. Неважно, из тарифов или из pet'ов.

можно сделать так, берём данные из LocalStorage и отрисовываем html, сильно смысла нету в данном случае хранить одинаковый html

if (currentCars.length > 0) {
  for (let car of currentCars) {
    renderFormCar(car);
  }
}

function renderFormCar (currentCar) {
  let type = currentCar?.CarType || "";
  let model = currentCar?.Model || "";
  let passCarClone = document.createElement("div");
  passCarClone.classList.add("car-item");
  passCarClone.innerHTML = `
       <span class="remove">X<span>
       <input type="text" class="form__car-type" placeholder="Введите тип" value="${type}">
       <input type="text" class="form__car-model" placeholder="Введите Марка и Модель тр. ср-ва" value="${model}">
       <div></div>
        <button class="primary-btn" type="submit">Применить</button>`;
  passCar.append(passCarClone);
};

addCar.addEventListener("click", function () {
  renderFormCar();
  passCar.addEventListener("click", function (e) {
    if (e.target.classList.contains("remove")) {
      e.target.parentNode.remove();
    }
  });
});

При клике на Применить в блоке вызывайте что-то типа validate(block):

function validate(block) {
    block.querySelectorAll('input') // и дальше по коду
}

То есть, ищите элементы не в document, а в конкретном блоке.

Ваши параметры TariffCalculationPassObj упаковываете в URLSearchParams:

const params = new URLSearchParams({
     FreightID: 1,
     CabinCategoryID: 2,
     Age16: parseInt(3),
     Age12: parseInt(4),
     Age5: parseInt(5),
     Age1: parseInt(6),
     Accommodation: 7,
   });

К url их добавляем:

const  url = `${route( "TariffCalculationPassenger" )}${params}`

Задаём опции для fetch

const xCSRFTOKEN =  document.querySelector('meta[name="_token"]').getAttribute("content")
const options = {
  method: 'GET',
  headers: {
    "X-CSRF-TOKEN": xCSRFTOKEN
  }
};

Ну и делаем запрос:
const response = await fetch(url, options)
Ну а дальше уже сами, в then обрабатываете то что вам нужно и тп и тд
PS надеюсь без опечаток, но суть вы поняли

У вас индекс idxPass явно ищется не в том массиве

const idxPass = passengers.findIndex(p => String(p.cabinCategoryID) === String(currentTariff[idxCabin].cabinCategoryID)))

// Получаем массив с объектами
const arr = localeStorage.getItem('foo')
// Ищем нужный объект по id
const item = arr.find(i => i.id === 1) // если работаем с объектами, помним, что мы получаем ссылку на объект
// Если находим, меняем какое то значение 
if (item) item.key = 123123
// Записываем массив с измененными данными в localeStorage
localeStorage.setItem('foo', arr)

Я бы разнес нужные элементы по разным переменным. Примерно:

let elСountTwo = el.countTwo ? `${el.countTwoTxt}: ${el.countTwo}` : '',
    elСountThree = el.countThree? `${el.countThreeTxt}: ${el.countThree}` : '';

И потом бы в шаблоне выводил:

`<div class="item">${elСountTwo} ${elСountThree}</div>`