Auto-generated list-group-items not responding to active class

http://stackoverflow.com/questions/27349257/auto-generated-list-group-items-not-responding-to-active-class

HTML

<p>
  <button id="button" class="btn btn-success">Generate Alerts</button>
</p>
<div class="list-group">
  <a href="#" class="list-group-item active">Cras justo odio</a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="panel panel-default">
  <div class="panel-heading">Generated Alerts</div>
  <div class="panel-body">
    <div id="ticker" class="list-group">asdsa</div>
  </div>
</div>

JavaScript

(function ($) {
  var counter = 0;
  var html;

  $('#button').click(function() {
    for (var i = 0; i < 5; i++) {
      counter++;

      html = '<a class="list-group-item';

      if (counter === 1) {
        html += ' active"';
      }

      html += '" href="#">';
      html += '<h4 class="list-group-item-heading">';
      html += 'Alert #' + counter;
      html += '</h4>';
      html += '<p class="list-group-item-text">';
      html += 'Example Text ' + counter;
      html += '</p>';
      html += '</a>';

      $('#ticker').append(html);
    }
  });

  $('.list-group').on('click', '.list-group-item', function (event) {
    event.preventDefault();

    $(this).addClass('active').siblings().removeClass('active');
  });
})(jQuery);