I need to pass this element to another active div when i click on the cart i made an e-commerce website

HTML the cart div is active and the cart the box is addto

<div class="active"> 
                <div class="text">
                    <i class="fa-solid fa-x xmark"></i>
                </div>
            </div> // this is the cart
<div class="row">
        <div class="col col">
            <div class="image">
                <img src="img/products/f1.jpg" alt="">
            </div>
            <div class="text">
                <h1>T-shirt</h1>
                <i class="fa-solid fa-cart-shopping addto"></i>
            </div>
        </div>
        <div class="col col1">
            <div class="image">
                <img src="img/products/f1.jpg" alt="">
            </div>
            <div class="text">
                <h1>T-shirt2</h1>
                <i class="fa-solid fa-cart-shopping addto"></i>
            </div>
        </div>
    </div>

JS

let cart = document.querySelector(".cart");
let cartPage = document.querySelector(".active");
let xMark = document.querySelector(".xmark");
let col1 = document.getElementsByClassName("col1")
let addTo = Array.from(document.getElementsByClassName("addto"));

cart.addEventListener("click",function(){
    cartPage.style.width = "30%";
    cartPage.style.opacity = "1";
    cartPage.style.zIndex = "10";

});
xMark.addEventListener("click",function (){
    cartPage.style.width = "0";
    cartPage.style.opacity = "0";
    cartPage.style.zIndex = "-1";
    
});

i need when i click on addto variable i need to append the col1 to the cartPage