jQuery Coverflow Plugin problem showcase

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://rawgit.com/vanderlee/coverflow/master/jquery.coverflow.js"></script>
<div id="preview">
    <div id="preview-coverflow">
        <img class="cover" src="http://fillmurray.com/200/100/" />
        <img class="cover" src="http://fillmurray.com/200/50" />
    </div>
</div>
<div>
    <button id="add-button">Add</button>
</div>

CSS

#preview {
    padding-bottom: 100px;
}
#preview-coverflow .cover {
    cursor: pointer;
    width: 320px;
    box-shadow: 0 0 4em 1em white;
}

JavaScript

$(function () {
    var coverflowEl = $("#preview-coverflow");
    coverflowEl.coverflow({
        index: 20,
        density: 1,
        innerOffset: 20,
        innerScale: .9,
    });
    $("#add-button").on("click", function () {
        var currentIndex = coverflowEl.coverflow("index");
        coverflowEl.append($('<img class="cover" src="http://fillmurray.com/220/60/" />'));
        coverflowEl.coverflow("refresh", currentIndex);
    });
});