Why addEventListenr dosen’t work in javascript [duplicate]

I tried to get the e.target of 3 buttons through addEventLister but it doesn’t work with javascript but works fine with jquery.Can you explain this to me?

let cards = [{
    title : 'selin',
    price : 20000
},{
    title : 'young',
    price : 30000
},{
    title : 'hanoe',
    price : 10000
}]


for(let i=0; i<cards.length; i++){
    
var cards_templte = `
<div class="card col-md-4" >
     
       <div class="card-body">
         <h5 class="card-title">${cards[i].title}</h5>
         <p class="card-text">${cards[i].price}</p>
         <button class="store-btn">구매</button>
       </div>
 </div>
`

document.querySelector('.row').insertAdjacentHTML('beforeend', cards_templte);
}




document.querySelector('.store-btn').addEventListener('click',function(e){
    console.log(e.target)

})

Can you explain this to me?