如何在省略字尾隨意切換See more 或是 close

Question

以下是我的代碼，button規定必須在省略字尾後，現在的問題是為何我點擊see more後，在字尾添加的close點擊無效

<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>");
});
});
})