How to display the read more and read less button in WordPress

Solution:

var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
var removeStr;
var text = $('.countcontent').text();

$(".countcontent").each(function() {
  var textlength = $(this).text().length;
  if (textlength > maxLength) {
    var myStr = $(this).text();
    var newStr = myStr.substring(0, maxLength);
    var removedStr = myStr.substring(1, maxLength);
    $(this).empty().html(newStr);
    $(this).append('<span class="more more-text">' + moretxt + '</span>');
  } else {
    $(this).append('<sapn class="less less-txt">' + lesstxt + '</a>');
  }
});

$(".more-text").click(function() {
  if ($(this).hasClass("more")) {
    $(this).removeClass("more");
    $('.countcontent').empty();
    $('.countcontent').text(text);
  } else {
    $(this).addClass("more");
    $(this).text(moretxt);
    $(this).siblings(".more-text").hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="countcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>