slide out slide in animate.css

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.min.css">
<div id="reportContainer">
  <div id="removableContent" class="container">
    <div id="horseInfo" class="row">
      <div class="col-xs-2">
        <h5><span class="raceNo">1</span></h5>
      </div>
      <div class="col-xs-8">
        <h5 class="name-line-height" style="font-weight: 900">Delgany Demon</h5>
      </div>
      <div class="col-xs-2">
        <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
      </div>
    </div>
    <div id="horseInfo" class="row">
      <div class="col-xs-2">
        <h5><span class="raceNo">2</span></h5>
      </div>
      <div class="col-xs-8">
        <h5 class="name-line-height" style="font-weight: 900">Gunginr</h5>
      </div>
      <div class="col-xs-2">

        <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
      </div>
    </div>
    <div id="horseInfo" class="row">
      <div class="col-xs-2">
        <h5><span class="raceNo">3</span></h5>
      </div>
      <div class="col-xs-8">
        <h5 class="name-line-height" style="font-weight: 900">Badboy Leroy</h5>
      </div>
      <div class="col-xs-2">
        <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
      </div>
    </div>
    <div id="horseInfo" class="row">
      <div class="col-xs-2">
        <h5><span class="raceNo">4</span></h5>
      </div>
      <div class="col-xs-8">
        <h5 class="name-line-height" style="font-weight: 900">Elvis</h5>
      </div>
      <div class="col-xs-2">

        <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
      </div>
    </div>
    <div id="horseInfo" class="row">
      <div class="col-xs-2">
        <h5><span class="raceNo">5</span></h5>
      </div>
      <div...

JavaScript

$(document).ready(function(){
    $(document).on('click', '.quickPick', function (e) {
        removeOldContent().then(function(){
        		getInitialPicks();        
        });
    });
})

function removeOldContent() {
    var deferred = new jQuery.Deferred();
    var $removableContentDiv = $('#removableContent > div');
    var removableContentLength = $removableContentDiv.length;
    
    $removableContentDiv.each(function (index) {
        var elm = $(this);
        setTimeout(function () {
            elm.toggleClass('animated fadeOutLeft').promise().done(function(){
              elm.remove();
              removableContentLength--;
          		if (!removableContentLength){
                	deferred.resolve();
              }
            })
        }, index * 150);
    });
    return deferred;
}

function getInitialPicks() {
    $.ajax({
    		async: true,
        type: 'post',
        url: '/echo/html/',
        data: {
        },
        dataType:'html',
        success: function(data) {
            $('#reportContainer').html('<div id="removableContent" class="container"> <div id="horseInfo" class="row"> <div class="col-xs-2"> <h5><span class="raceNo">1</span></h5> </div> <div class="col-xs-8"> <h5 class="name-line-height" style="font-weight: 900">NEW ITEM 1</h5> </div> <div class="col-xs-2"> <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button> </div> </div> <div id="horseInfo" class="row"> <div class="col-xs-2"> <h5><span class="raceNo">2</span></h5> </div> <div class="col-xs-8"> <h5 class="name-line-height" style="font-weight: 900">NEW ITEM 2</h5> </div> <div class="col-xs-2"> <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button> </div> </div> <div id="horseInfo" class="row"> <div class="col-xs-2"> <h5><span class="raceNo">3</span></h5> </div> <div class="col-xs-8"> <h5 class="name-line-height" style="font-weight: 900">NEW ITEM 3</h5> </div> <div class="col-xs-2"> <button...