Show textarea's each line text into div on button click

Hi

I wanna get textarea's each line text into div. Below is my code but problem is that when I'm clicking second time on button then old and new values is being added.

I wanna show only current values on textarea even if i click so many time.

 /* Preview Details */
$('.btn-preview-details').on('click', function(){
    PopupContainer('.modal.preview-details-popup');
    previewDetailsText();
});

/* preview text area's each line */
function previewDetailsText(){
    var getVal = $('#detailText').val();
    if(getVal != ""){
        var getText = getVal.split('\n');
        var items=new Array()
        var counter = 0
        for(var i = 0; i < getText.length; i++){
            /* using lines[i] which will give you each line */
            $('.preview-text').append('<li>'+getText[i]+'</li>');
        }
    }
}

HTML :
<textarea class="span12" name="detailText" id="detailText" rows="6"></textarea>
<button type="button" class="btn btn-inverse btn-preview-details">Preview</button>