Добавление клона, исходный слой которого был удален

Я пытаюсь клонировать существующий слой ($('.total-row').first()), а затем удалять все эти слои ($('.total-row')) и добавлять некоторые настроенные слои из клонированный слой. Это код JS-JQuery:

$(document).on('click', '.playOnAP',function() {
var clon = $('.total-row').first().clone(true)              
$('.total-row').remove();

$('#mp3-list ul li',this).each( function( index, element ) {
    $('.jspPane').append(clon);
    var totalTitle = $('.total-title').eq(index);
    totalTitle.attr('src', $(this).text() );                                                //url canción
    totalTitle.text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));    //canción
    totalTitle.siblings( '.total-artist' ).text(artista);                               //artista
    totalTitle.attr('imagen', caratula);
});     
}

И вот это html:

<div class="jspPane" style="padding: 0px; top: 0px; width: 300px;">
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">
    <div class="total-checked" onclick="" type="checkbox"></div>
    <div class="total-not-playing total-playing"></div>
    <div class="total-title" src="http://dcodedmagazine/wp-content/uploads/2013/12/Portishead_-_03_-_Undenied.ogg">titulo canción</div>
        <div class="total-artist">artista</div>
    <div style="clear:both;"></div>
  </div>
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">
    <div class="total-checked" onclick="" type="checkbox"></div>
    <div class="total-not-playing total-playing"></div>
    <div class="total-title" src="http://dcodedmagazine/wp-content/uploads/2013/12/01.-Bored.ogg" imagen="<img src="http://dcodedmagazine/wp-content/uploads/2013/12/AlbumArt_6EC70FCA-D8CB-4DB1-955C-40F2E6CD2AB4_Large-150x150.jpg" class="attachment-100x100 wp-post-image" alt="AlbumArt_{6EC70FCA-D8CB-4DB1-955C-40F2E6CD2AB4}_Large" height="100" width="100">">01.-Bored.ogg</div>
    <div class="total-artist">Deftones</div>
    <div style="clear:both;"></div>
  </div>
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">...
</div>

Проблема состоит в том, что он добавляет только первый элемент $('#mp3-list ul li',this) из $('.playOnAP'), в то время как другие слои сестры должны быть добавлены.