Почему не создаются новые объекты при добавлении дополнительных option — select?

Question

[Andy Koshman]

Всем добрый, по клику на cartBtn вызывается функция createPets() в которой формируется объект dataSelectPets = {} для заполнения данными шаблона функции renderPets() за пределами клика и выполняет соответствующий рендер приходящих данных из объекта dataSelectPets = {} который формируется в map.
Проблема в том, что при клике на кнопку

<button class="tariff__pets-add">Добавить еще</button>

можно создавать дополнительные селекты с животными, например человек выбрал в род. селекте кошку и еще добавил селект с option собака, мне нужно чтобы в данном случае создалось 2 карточки с кошкой и собакой, но по какой то причине создастся только 1 объект с кошкой и на новые добавленные селекты функционал не реагирует. Подскажите пожалуйста где ошибка никак не могу найти.
https://codepen.io/Andy41/pen/qBMbbPq?editors=1011

spoiler

<div class="cart">
  <div class="tariff__port">
    <div class="pets" data-allowed="1"></div>
    <div class="tariff__pets">
      <div>
        <h2 class="tariff__pets-title">Животные</h2>
        <div class="tariff__pets-parent">
          <div class="tariff__pets-child">
            <div class="tariff__pets-block">
              <select class="tariff__pets-type" name="" id="">
                <option value="" disabled selected>Питомец</option>
                <option value="1">Кошка</option>
                <option value="2">Собака</option>
                <option value="3">Попугай</option>
              </select>
            </div>
            <button class="tariff__pets-add">Добавить еще</button>
          </div>
        </div>
      </div>
    </div>
    <button class="cart-btn" type="submit">Добавить в корзину</button>
  </div>
  <div class="info"></div>
</div>

const LSKeyPets = "pets";
const sidebarInfoPets = document.querySelector('.info');
const getPets = () => JSON.parse(localStorage.getItem(LSKeyPets)) || [];

const renderPets = () => {
  sidebarInfoPets.innerHTML = getPets()
    .map(
      (pets) =>
      ` <div class="sidebar-item pets-item" id="${pets.ID}" style="background: rgba(255, 245, 215, 0.4509803922);">
          <div class="tariff__port-txt">ЖИВОТНЫЕ</div>
          <div class="tariff__port-txt">Вид животного: ${pets.typeOfPetsTxt}</div>
          <div class="close-card tariff__pets-close">X</div>
        </div>`
    )
    .join("");
};

renderPets();

let tariffPort = document.querySelectorAll(".tariff__port");

tariffPort.forEach((item) => {
  item.addEventListener("click", function(e) {
    let tariffPortParent = e.target.closest(".tariff__port");
    let tariffPetsChild = tariffPortParent.querySelector(".tariff__pets-child");

    if (e.target.classList.contains("tariff__pets-add")) {
      tariffPetsChild.insertAdjacentHTML(
        "afterend",
        `
        <div class="card-child tariff__pets-child">
          <div class="tariff__pets-block">
            <select class="tariff__pets-change tariff__pets-type" name="" id="">
              <option value="" disabled selected>Питомец</option>
              <option value="1">Кошка</option>
              <option value="2">Собака</option>
              <option value="3">Попугай</option>
            </select>
          </div>
          <div class="tariff__pets-close">X</div>
        </div>
        `
      );
      item.addEventListener("click", function(e) {
        if (e.target.classList.contains("tariff__pets-close")) {
          e.target.parentNode.remove();
        }
      });
    }
  });
});

let cartBtn = document.querySelectorAll(".cart-btn");
cartBtn.forEach((button) => {
  button.addEventListener("click", function(e) {
    const cart = e.target.closest(".cart");

    const selectBlocksArr = [...cart.querySelectorAll(".tariff__pets-parent")];

    let pets = getPets();


    function createPets() {
      const parentBlock = e.target.closest('.tariff__port');
      const petsAllow = parentBlock.querySelector('.pets');
      if (petsAllow.dataset.allowed == 1) {
        console.log('selectBlocksArr2: ', selectBlocksArr)
        selectBlocksArr.map((selectBlock) => {
          const typeSelect = selectBlock.querySelector(".tariff__pets-type");
          const getSelectedOptionPetsText = (select) =>
            select.options[select.selectedIndex].textContent;
          const getSelectedOptionPetsVal = (select) =>
            select.options[select.selectedIndex].value;
          if (getSelectedOptionPetsVal(typeSelect) !== '') {
            const dataSelectPets = {
              ID: Math.floor(Math.random * 100),
              typeOfPetsTxt: getSelectedOptionPetsText(typeSelect),
              typeOfPets: getSelectedOptionPetsVal(typeSelect),
            };

            pets.push(dataSelectPets);
            localStorage.setItem(LSKeyPets, JSON.stringify(pets));
            renderPets();
          }
        });
      }
    }
    createPets()
  })
})