Comment basculer entre Voir plus ou fermer à volonté en omettant le suffixe ?

Question

Ce qui suit est mon code. Le bouton stipule que le suffixe doit être omis. Le problème maintenant est pourquoi après avoir cliqué sur voir plus, le clic de fermeture ajouté au suffixe est invalide

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

.