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();
        getInitialPicks();
    });
})

function removeOldContent() {

    $('#removableContent > div').each(function (index) {
        var elm = $(this);
        setTimeout(function () {
            elm.toggleClass('animated fadeOutLeft', function () {
                $(this).remove();
            });
        }, index * 150);
    });
}

function getInitialPicks() {
	alert("hui");
    $.ajax({
    		async: true,
        type: 'post',
        url: '/echo/html/',
        data: {
            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 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">NEW ITEM 4</h5> </div> <div class="col-xs-2"> <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button> </div> </div> <div id="horseInfo"...