Javascript Adição de elementos html na página usando js

[Edward_A_Little]

Estou com um pouco de dificuldade em entender porque esse código está substituindo o elemento html que crio primeiro e não adicionando outro logo após o primeiro.
Vou mandar abaixo o código em que adiciono os itens no localstorage e quando uso eles.

 

// PARTE DE CADASTRO DOS ITENS NO LOCALSTORAGE
const clientForm = document.querySelector("#client-form");


clientForm.addEventListener("submit", (e) => {
e.preventDefault();

const clientNameInput = document.querySelector("#tutorName");
const adressInput = document.querySelector("#adress");
const phoneInput = document.querySelector("#phone");
const dateInput = document.querySelector("#date");

const petNameInput = document.querySelector("#petName");
const ageInput = document.querySelector("#age");
const sizeInput = document.querySelector("#size");

let clientObject = {
clientName: clientNameInput.value,
adress: adressInput.value,
phone: phoneInput.value,
date: dateInput.value,

petName: petNameInput.value,
age: ageInput.value,
size: sizeInput.value,
}

let clientList = JSON.parse(localStorage.getItem("clientData")) || [];

clientList.push(clientObject);

localStorage.setItem("clientData", JSON.stringify(clientList))

window.location.href = "clientList.html";

})



// PARTE DE ADIÇÃO DOS CLIENTE DO LOCALSTORAGE NA LISTA
const divCards = document.querySelector(".cards-container");

const saveCard = () => {

let clientList = JSON.parse(localStorage.getItem("clientData")) || [];

if (localStorage.getItem("clientData") != null) {
let petNome = ""
let data = ""

if (clientList.length > 0) {
let recentClient = clientList[clientList.length - 1];

petNome = recentClient.petName;
data = recentClient.date;
}

const card = document.createElement("div")
card.classList.add("card")

const cardImage = document.createElement("div")
cardImage.classList.add("image")
card.appendChild(cardImage)

const image = document.createElement("img")
image.src = "./css/assets/clients/dog.png"
image.alt = ""
image.async = true
cardImage.appendChild(image)

const cardData = document.createElement("div")
cardData.classList.add("data")
card.appendChild(cardData)

const cardName = document.createElement("h2")
cardName.textContent = petNome
cardData.appendChild(cardName)

const cardDate = document.createElement("p")
cardDate.textContent = data
cardData.appendChild(cardDate)

divCards.appendChild(card)
}
}

saveCard()