Иван

Делать валидацию при каждом нажатии

doOrderBtn.addEventListener('click', function (el) {
    const phio = document.querySelector('#name')
    const phone = document.querySelector('#phone')
    const address = document.querySelector('#address')
    if (phio.value < 1 && phone.value < 1 && address.value < 1) {
        el.preventDefault()
    }
});

PS
Лучше вешать на submit формы.

Сохранение данных продуктов в localStorage

window.addEventListener('click', function(event) {
  if (event.target.classList.contains('card-btn') || event.target.classList.contains('adaptive-price')) {
    const cardHTML = event.target.closest('.card');

    const productInfo = {
      img: cardHTML.querySelector('.card-img').className, // Используйте className
      name: cardHTML.querySelector('.card-title').innerText,
      desc: cardHTML.querySelector('.card-desc').innerText,
      price: cardHTML.querySelector('.card-price').innerText,
    };

    const alreadyInStorageCart = JSON.parse(localStorage.getItem('productInfo')) || [];
    localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorageCart, productInfo]));
  }
});

Генерация HTML из данных в localStorage

const cartCardBox = document.querySelector('.cart-card-box');

if (localStorage.length > 0) {
  const products = JSON.parse(localStorage.getItem('productInfo'));
  products.forEach((product, index) => {
    const cartCardHTML = `
      <li class="card" data-index="${index}">
        <ul class="card-box">
          <li class="${product.img}"></li>
          <li class="card-content-box">
            <ul>
              <li class="delete-card-btn-box"><button class="delete-card-btn">Delete</button></li>
              <li class="card-title">${product.name}</li>
              <li class="card-desc">${product.desc}</li>
              <li class="price">${product.price}</li>
            </ul>
          </li>
        </ul>
      </li>
    `;
    cartCardBox.insertAdjacentHTML('beforeend', cartCardHTML);
  });
}

Удаление элемента по индексу

window.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-card-btn')) {
    const card = event.target.closest('.card');
    const index = parseInt(card.dataset.index, 10); // Получите индекс из атрибута data-index

    const products = JSON.parse(localStorage.getItem('productInfo'));
    products.splice(index, 1); // Удаляет элемент по индексу
    localStorage.setItem('productInfo', JSON.stringify(products)); // Сохраняем измененный массив обратно в localStorage

    card.remove(); // Удаление HTML карточки
  }
});

В первом куске кода замените

const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([cartCardHTML]))

на

const alreadyInStorage = JSON.parse(localStorage.getItem('productInfo'));
const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorage, cartCardHTML]))

Иначе вы всегда в productInfo пишете массив с одним элементом

На момент вызова document.getElementById('9') на странице нет элемента с таким идентификатором.

document.getElementById('9') возвращает null, нет на странице такого элемента. Почему его нет, по приведённому коду сказать невозможно.

Ломать себе голову тут не над чем и вариант решения только один - он легко находится по тексту ошибки.

Числовой ID - это вообще плохая идея и раньше так было нельзя.
Сейчас можно, но ломается древняя магия: