var i = 1,
    listHolder = $('.list-holder'),
    outerHolder = $('.outer-list');

outerHolder[0].scrollTop = outerHolder[0].scrollHeight;

$('#add').click(function(){
  outerHolder.stop();
  $('div.list-holder').append('<div class="rule"><p>This is rule number '+i+'.</p><a href="#" class="close">Close</a></div>');
  i++;
  
  //  Scroll functionality
  outerHolder.animate({scrollTop: outerHolder[0].scrollHeight - 90}, 500, "easeOutCubic");
  
});

$('.outer-list').on('click', 'a', function(){
  thisRule = $(this).parent('div');
  thisRule.slideUp(500, function(){
    $(this).remove();
  });
  outerHolder.animate({scrollTop: outerHolder[0].scrollHeight - 90}, 500, "easeOutCubic");
});