サフィックスを省略した場合に、「もっと見る」と「閉じる」を任意に切り替える方法

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