How to access two HTML files classes at the same time?

I want to access two HTML files classes at the same time. The first function takes the classes of index.html & the second function takes the class of cart.html but it is not getting the .cart-items class and gives me the else-statement.

I don’t want to use getElementByClassName() in the second function because it gives me nodes. Instead, I want to get the original HTML text using querySelector() so that I could use it to add the items in cart.html

function addToCartClicked(event) {
    var Title, Price, Image
    var button = event.target
    var shopItem = button.parentElement.parentElement.parentElement.parentElement
    var title = shopItem.getElementsByClassName("name-of-product")[0].innerText
    var price = shopItem.getElementsByClassName('product-price')[0].innerText
    var image = shopItem.getElementsByClassName("hover-img")[0].src

    let itemsList = {
        Title: title,
        Price: price,
        Image: image,
    }    
    let cartItems = {
        [itemsList.Title]: itemsList
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems)); // It stores the data in localstorage.
    addItemToCart(title, price, image);
}

function addItemToCart(title, price, image) {
    var cartItems = document.querySelector(".cart-items");
    if (cartItems) {
        console.log(cartItems);
    } else {
        console.log("not getting the HTML code.")
    }
}

cart.html

<tbody class="cart-items"> 
    <tr class="cart-row">
        <td class="image" data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
        <td class="product-des" data-title="Description">
            <p class="product-name"><a href="#">Women Dress</a></p>
        </td>
        <td class="price" data-title="Price"><span>$200.00</span></td>
    </tr>
</tbody>