Как написать эту jquery строку на чистом javascript?

Как написать эту jquery строку на чистом javascript? Строку я обозначил комментарием.

function loadGoods() {
    $.getJSON('goods.json', function (data) {
        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art=" '+key+' "> Купить</button>';
            out+='</div>';
        }
            document.getElementById('goods').innerHTML = out;                        
            $('button.add-to-cart').on('click', addToCart); //эта строка, 
    });
}

Если написать:

document.querySelector('button.add-to-cart').addEventListener('click', addToCart);

то тогда только возле одного (первого) товара кнопка реагирует на клик и добавляет в корзину, а возле остальних товаров кнопки не реагируют на клик и не добавляют товар в корзину....

addToCart функция которую напишу снизу на всякий случай для понимания: Функция addToCart:

function addToCart() {
    var articul = this.getAttribute('data-art');       
    if (cart[articul]!=undefined) {                         
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
    showMiniCart();
}