Почему отрабатывает if после отработки else?

Всем привет, по ходу разработки функционала у меня возникло 2 вопроса. В данной работе по клику на кнопку "Добавить авто в корзину" добавляются карточки с актуальными введенными данными в корзину. Так же присутствует кнопка "Добавить транспорт", по клику которой добавляются дополнительный блок с инпутом и селектом для более гибкого ввода данных в корзину.

https://jsfiddle.net/vnwo28ue/47/

https://codepen.io/Andy41/pen/OJwqpXE?editors=1111

Вопрос заключается в том, что на 42 строке имеется переменная let limitCar = 2, которая подразумевает макс количество автомобилей вообще которое является пределом и на 44 строке мне нужно сравнить общую сумму автомобилей + количество автомобилей в одной карточке с limitCar такого вида: if (amountSum + dataCars.carAmount > limitCar) {} Сравнивается и работает вроде правильно, но если допустим выбрать при let limitCar = 2 в первом селекте 1 авто а во втором 2, то отработает if с предупреждением что общая сумма больше чем лимит и затем отработает else с добавлением карточки в корзину у которой количество было выбрано 1. Как можно это исправить? Может дело в amountSum? И второй вопрос, на 89 строке я очищаю все карточки автомобилей из корзины и хранилища, но после повторного добавления авто в корзину возвращаются удаленные карточки. Я понимаю что это как то связано с глобальным getItem, но исправить не получается.

<div class="block">
  <div class="parent">
    <div class="child">
      <input type="text" class="model" placeholder="Введите модель авто">
      <select class="amount">
        <option value="" disabled selected>Количество</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button class="add">Добавить транспорт</button>
    </div>
  </div>
  <button class="btn">Добавить авто в корзину</button>
</div>
<button class="delete-all" style="background: #e75757;">Удалить все авто из корзины</button>
<div class="cart">
  <span class="cart-title">Корзина</span>
  <div class="info"></div>
</div>

const parent = document.querySelector(".block");
const info = document.querySelector(".info");
LSKeyCars = "cars";
let getCars = JSON.parse(localStorage.getItem(LSKeyCars) || "[]");


let amountSum = getCars.reduce( //общая сумма авто (считаю для условия if на 44 строке)
  (acc, curr) => acc + curr.carAmount,
  0
);
console.log('amountSum before click: ', amountSum)

const renderCars = () => {
  info.innerHTML = getCars
    .map(
      (car) =>
      `<div class="item" id="${car.id}">
        <div class="title">ЛИЧНЫЙ ТРАНСПОРТ</div>
        <div>Модель авто: ${car.carModel}</div>
        <div>Количество авто: ${car.carAmount}</div>
       </div>`
    )
    .join("");
};
renderCars();

let dataCars; //объект с пользов. данными в глобальной обл. видимости
parent.addEventListener("click", function() { //отрендерить данные из LS
  const childArr = [...document.querySelectorAll(".child")];
  if (e.target.classList.contains("btn")) {
    childArr.map(item => { // перебираю все карточки в корзине
      const amount = +item.querySelector(".amount").value;
      const model = item.querySelector(".model").value;

      dataCars = { //объект с пользов. данными
        id: Math.floor(Math.random() * 100),
        carModel: model,
        carAmount: amount,
      };

      let limitCar = 2 //максимальный лимит количества автомобилей
      // если общая сумма + количество из 1 карточки > лимита то не рендерить
      if (amountSum + dataCars.carAmount > limitCar) {
        alert(
          "Количество автомобилей превышает количество взрослых"
        );
      } else {
        getCars.push(dataCars);
        localStorage.setItem("cars", JSON.stringify(getCars));
        renderCars();

        let sumCar = getCars.reduce( // общая сумма авто при клике
          (acc, curr) => acc + curr.carAmount,
          0
        );
        amountSum = sumCar;
        console.log('amountSum after click: ', amountSum)
      }
    })
  }
});

//add select car
const add = document.querySelector(".add");
const child = document.querySelector('.child')
add.addEventListener("click", function() {
  child.insertAdjacentHTML(
    "afterend",
    `<div class="child">
        <input type="text" class="model" placeholder="Введите модель авто">
      <select class="amount">
        <option value="" disabled selected>Количество</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
        <span class="remove">X<span>
        </div>`)
})

const remove = document.querySelector('.remove')
parent.addEventListener('click', function(e) {
  if (e.target.classList.contains("remove")) {
    e.target.parentNode.remove()
  }
});

//полностью очистить корзину(конкретно items автомобилей) 
const allRemove = document.querySelector('.delete-all')
allRemove.addEventListener('click', function() {
  //пытаюсь получить актуальный state массива 
  const currentCars = JSON.parse(localStorage.getItem("cars") || "[]");
  const info = document.querySelector(".info");
  if (currentCars) {
    localStorage.removeItem("cars");
    while (info.firstChild) {
      info.removeChild(info.firstChild);
      let sumCar = getCars.reduce( // общая сумма не пересчитывается
        (acc, curr) => acc + curr.carAmount,
        0
      );
      amountSum = sumCar;
      console.log('amountSum allDelete click: ', amountSum)
    }
  }
})