Necesito pasar este elemento a otro div activo cuando hago clic en el carrito. Creé un sitio web de comercio electrónico.

HTML el carrito div está activo y el carrito se agrega al cuadro

 <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"; });

necesito cuando hago clic en agregar a la variable necesito agregar el col1 a la página del carrito