続きを読むボタンが機能しない

前提・実現したいこと

複数行の記事を、5行を超えると自動で省略し、続きを読むボタンが表示されるようにしたいです。各ボタンで各記事が表示されるように for each を用いてみたところ、動かなくなってしまいました。
// 修正：生jsでなく、jQueryに変更したところ、class .rr の追加までは上手くいき、ボタンをクリックして.rrのつけ外しができなくなりました。
//
動きましたが、滑らかに動かしたいです。

発生している問題・エラーメッセージ

console.log(textContents.textContent); がそもそも取得できていないみたいです。jQueryの $('.room div').each(function () 内で $(this).find('.rp) を取得するような感じで、ネイティブで書きたかったのですがうまくいきませんでした。
//
console.log(c) が取得できていないみたいです。コンソールに表示されませんでした。

該当のソースコード

js
1  if ($('.room > div').length) {
2    $('.room div').each(function () {
3      var b = $(this),
4          textContents = b.find('p'),
5          moreButton = b.find('.more-button');
6          
7      // テキスト要素の高さを取得
8      var textHeight = textContents.height();
9      // テキスト要素のline-heightを取得
10      var lineHeight = parseFloat($("body").css("line-height"));
11      console.log(lineHeight)
12
13      // メニューが6行以上だったら高さを5行にする
14      if (textHeight > lineHeight * 5) {
15        b.addClass('rr');
16      } else {
17        // メニューが5行以下ならMoreボタン非表示
18        moreButton.addClass('none');
19      }
20      $('.more-button').on('click', function () {
21        notr++;
22        var c = $(this).parent('.rr');
23        console.log(c)
24        if (notr % 2 !== 0) {
25          c.removeClass('rr');
26          $(this).addClass('none');
27        } else {
28          c.addClass('rr');
29        }
30      });
31    })
32    var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
33    $('.room').html($(".room").html().replace(exp, "<a target=\"_blank\" class=\"icon-lnr icon-exit\" href='$1'>$1</a>"));
34  }

html
1<div class="section room">
2   <div>
3      <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
4     <div class="more-button">More</div>
5   </div>
6   <div>
7     <p><span>テスト</span>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
8     <div class="more-button">More</div>
9   </div>
10   <div>
11     <p><span>テスト</span>夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
12     <div class="more-button">More</div>
13   </div>
14</div>

css
1.room > div p {
2  line-height: 1.8;
3  overflow: hidden;
4}
5.rr p {
6  display: -webkit-box;
7  -webkit-box-orient: vertical;
8  -webkit-line-clamp: 5;
9}
10.more-button {
11  text-align: right;
12}
13.more-button.none {
14  display: none;
15}

試したこと

js
1    $(document).on('click', '.more-button', function() {
2        var c = $(this).parent('div');
3        c.removeClass('rr');
4        $(this).text('close').addClass('o');
5      });
6      $(document).on('click', '.o', function() {
7        var c = $(this).parent('div');
8        c.addClass('rr');
9        $(this).text('more').removeClass('o');
10      });