I was training with some codes, so i have a problem. I have 2 consts in a webpack. First is a render. It works. There are some problems with div, it doesn't matter for me now.

const renderGoods =(goods) =>{
    // console.log("renderGoods")
    const goodWrapper = document.querySelector('.goods')
    console.log(goodWrapper)
    goodWrapper.innerHTML='';
    goods.forEach((goodsItem) => {
        goodWrapper.insertAdjacentHTML('beforeend',`
        <div class="card">
        ${goodsItem.sale ? '<div class="card-sale">🔥Hot Sale🔥</div>':''}
            <div class="card-img-wrapper">
            <span class="card-img-top"
                style="background-image: url('${goodsItem.img}')"></span>
            </div>
            </div>
        <div class="card-body justify-content-between">
            <div class="card-price">${goodsItem.price} ₽</div>
            <h5 class="card-title">${goodsItem.title}</h5>
            <button class="btn btn-primary to-corsine">В корзину</button>
        </div>
    </div>
    
        `)
    });
}
export default renderGoods

The second one needs elements from the first script. I want to get a button with class "to-corsine", but when i've tried - i had a zero-lenght array. My code to get an element is simple:

const corsine = function() {
    var things = [];
    var info = document.querySelector(".to-corsine");
    console.log(info);
}
export default corsine 

How can i get a full list of elements after render?