How to switch between See more or close at will when omitting the suffix

Question

The following is my code. The button stipulates that the suffix must be omitted. The problem now is why after I click see more, the close click added at the suffix is ​​invalid

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