Больше и меньше текста переключать данные, полученные через ответ jquery ajax с другой страницы

Я создаю небольшую функцию переключения большего и меньшего количества текста в jquery для данных, которые извлекаются по одному и добавляются к контейнеру div со страницы getData при нажатии кнопки с использованием ajax ... Проблема в том, когда впервые кнопка данные, по которым щелкнули, извлекаются, все больше и меньше текстовых функций работает нормально, но когда кнопка нажимается второй раз, а данные извлекаются второй раз и добавляются к div, тогда показывать больше и меньше текста работает с текущими извлеченными данными, но не со всеми ранее извлеченными данными ... кто-нибудь, пожалуйста, помогите мне в этом ... Спасибо

recordsDisplay.html

<div id = "container">
</div>
<button id = "click">Click Me</button>

style.css:

a.morelink {
    color:red;
}
.morecontent span {
    display: none;

}

jquery:

var showChar = 150;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
$('#click').click(function(){
    $.ajax({
        url : "getData.html",
        method : "GET",
        success : function(response){
            $('#container').append(response);
            var mymore = $('#container').find('.more');
$(mymore).each(function() {

                var content = $(this).html();
                if (content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class = "moreelipses">'+ellipsestext+'</span>&nbsp;<span class = "morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href = "" class = "morelink">'+moretext+'</a></span>';

                $(this).html(html);

                }

            });
            $(".morelink").click(function(){

        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
}
        })

getData.html:

<h5 class = "more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, ligula ornare viverra sodales, magna erat semper ante, non placerat nulla lorem id orci. Praesent auctor ultrices sodales. Etiam vitae eros nisi. Morbi dictum, turpis at varius ornare, ante diam dignissim erat, a vulputate eros massa sit amet quam. Donec viverra pharetra odio, nec porta libero sagittis ac. Nam porta ornare feugiat. Maecenas </h3>