JQuery click only registers first click and not subsequent clicks

JQuery click only registers first click and not subsequent clicks

I have a button group of three buttons. The relevant haml code is:
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-5-sec 5 sec
%button.btn.btn-default#refresh-30-sec 30 sec
%button.btn.btn-default#refresh-60-sec 60 sec
I'm trying to build an adjustable refresh-rate feature. The first click
registers and sets the refresh rate correctly (I inspected the event
object) but subsequent clicks on any button thereafter do not register,
they do not create an event object. My JS code is below:
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 60000);
console.log(intervalId);
$("#refresh-buttons").on("click", "button", function(event) {
if(event.target.id === "refresh-5-sec") {
clearInterval(intervalId);
setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 5000);
}
else if(event.target.id === "refresh-30-sec") {
clearInterval(intervalId);
setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 10000);
}
else if(event.target.id === "refresh-60-sec") {
clearInterval(intervalId);
setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 15000);
}
});
});
Thanks.