Почему рендер узла в DOM дереве происходит только после перезагрузки страницы?

Question

[Andy Koshman]

spoiler

Реализованный функционал:
При выборе авто из select и клику по кнопке "Добавить", рендерится карточка с авто. Суть в свойстве Cruise, еслиCruise === 1, когдаcheckbox === checked, то в карточке рендерится данный узел

carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));

из функции addCruiseToRenderCarCart. При Cruise === 0, соответственно узел не будет рендерится. Данный функционал отрабатывает! Так же я сделал фиктивный запрос с сервера в функции fetchVehicleData, с помощью которого, при клике по checkbox я получаю в панели "Тип транспорта" с сервера данные авто (которые сохранены у юзера в личном кабинете), которое юзер так же может отрендерить при клике по добавленной ноде авто. При таком сценарии, с сервера в любом случае приходит Cruise === 1, и узел

carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));

должен рендерится в карточке, но на данный момент узел не рендерится при первом добавлении, а рендерится в карточке уже после перезагрузки страницы. Я как смог вытащил и склеил куски кода с 3 модулей, где происходят все операции и реализовал сценарий событий.
Из того что я понял, по какой то причине, если добавлять с помощью функции getCarListAll то код не находит carCruiseContainer, хотя в DOM дереве он присутствует.

Ссылки на песочницы:

https://jsfiddle.net/6z8hfu4a/19/

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

В двух словах нужно нажать на checkbox, а потом по добавленному тексту данных авто, что имеется на скриншоте:

Рендерится карточка с авто:

Та же карточка после перезагрузки страницы (Появился "Круговой тариф", хотя должен был появиться до перезагрузки страницы):

Comments

[Антон Антон]

кажется настало время для https://vuejs.org/guide/introduction.html

[Andy Koshman]

Антон Антон, Увы, довольствуюсь легаси.

Answer 1

[Andy Koshman]

Задача решена, оказывается вместо реализации данной функции: addCruiseToRenderCarCart, можно всего лишь, в шаблоне функции renderCars() описать тернарник:

<div class="car__cruise">${car.Cruise === 1 ? 'круговой тариф' : ''}</div>