접미사 생략 시 자세히 보기 또는 닫기 사이를 마음대로 전환하는 방법

Question

다음은 접미사를 생략해야 한다고 규정하는 버튼입니다. 더 보기를 클릭한 후 접미사에 추가된 닫기 클릭이 유효하지 않은 이유가 바로 문제입니다

<div class="font">
<div class="description">
<p>超過50字很多很多很多很多很多很多很多很多很多很多很多很多字</p>
</div>
</div>

$(function () {
var $len = 20;
$(".font .description p").each(function () {
var $textold = $(this).text();
var $text = $(this).text().substring(0, $len - 1) + "";
if ($(this).text().length > $len) {
$(this).text($text).append("<button class='add'>..... See more</button>");
}
$('.add').click(function () {
$(this).closest(".font").find(".description p").text($textold).append("<button class='close'>close</button>");
});
$('.close').click(function () {
$(this).closest(".font").find(".description p").text($text).append("<button class='add'>..... See more</button>");
});
});
})