Snackbar works only on one element of certain class - material-design-lite

Question

I'm trying to add event listener for snackbar on all buttons with class add-culture-button, but it only works for the first element. For other elements, snackbar doesn't show at all (and there are no errors in console).
var snackbarContainer = document.querySelector("#notification");
var showSnackbarButton = document.querySelector(".add-culture-button");
var plantingLabel = document.querySelector("#planting-label");
var handler = function(event) {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount - 1);
}
showSnackbarButton.addEventListener("click", function() {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount + 1);
var data = {
message: "Kultura je dodata u listu za setvu.",
timeout: 2000,
actionHandler: handler,
actionText: 'Opozovi'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
Is there a way to make it work for all elements without repetition of the code?

Answer 1

Turns out I only had to use querySelectorAll instead of querySelector...
var snackbarContainer = document.querySelector("#notification");
var showSnackbarButton = document.querySelectorAll(".add-culture-button");
var plantingLabel = document.querySelector("#planting-label");
var handler = function(event) {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount - 1);
}
for (var i = 0; i < showSnackbarButton.length; i++) {
showSnackbarButton[i].addEventListener("click", function() {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount + 1);
var data = {
message: "Kultura je dodata u listu za setvu.",
timeout: 2000,
actionHandler: handler,
actionText: 'Opozovi'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}