Html 根据内容长度多读/少读。我的内容长度每次都会变化

我有一个内容，每次都不一样。它的最小值也可以是100到1000。所以我想使用show/less来阅读HTML页面中的内容。我可以看出“阅读更多”很有效。但当我点击“少读”时，它就消失了

<script>

$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + ' <a href="javascript:void(0);" class="read-more">read less...</a></span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
    $(".read-less").click(function(){
        $(this).contents().wrap();
        $(this).remove();
    });
});

</script>

我的HTML

 <label class="col-md-10"><p class="show-read-more">This content length varies everytime</p></label>

此内容长度每次都会变化

这里发生的事情是，当我单击“阅读更多”按钮时，它会显示整个内容。如果我点击“少读”，它就会消失。 我该怎么解决这个问题

 <label class="col-md-10"><p class="show-read-more">This content length varies everytime</p></label>