JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<article>
  <div class="entry-content">
  <div class="spacer"></div>
    <h5>
    h5見出し
    </h5>
    <div class="spacer"></div>
    <h3>
    h3見出し1
    </h3>
    <h4>
    h4見出し1
    </h4>
    <div class="spacer"></div>
    <h4>
    h4見出し2
    </h4>
    <h4>
    h4見出し3
    </h4>
    <div class="spacer"></div>
    <h3>
    h3見出し2
    </h3>
    <h4>
    h4見出し4
    </h4>
    <div class="spacer"></div>
    <h5>
    h5見出し1
    </h5>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <h5>
    h5見出し2
    </h5>
  </div>
</article>

CSS

.spacer {
  display: block;
  height: 300px;
}

/* -------ここから------ */

/* toc */
#toc [class*=lv-] {
	display: block;
	margin: .5rem 0;
}
#toc div::before {
	display: inline-block;
	margin-right: .25rem;
	color: rgb(72 95 199 / 50%);
}
#toc .lv-1 {
	margin-top: 1rem;
	margin-left: 0;
}
#toc .lv-2 {
	margin-left: 1rem;
}
#toc .lv-3 {
	margin-left: 2rem;
}
#toc .lv-1::before {
	content: "#";
}
#toc .lv-2::before {
	content: "+";
}
#toc .lv-3::before {
	content: "-";
}
.entry-content :is(h3,h4,h5) {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.backToc {
	font-size: 1.5rem;
}

JavaScript

jQuery(function($) {
  if ($(".entry-content :header").length) {
    $(".entry-content").prepend("<div id='toc' class='toc box'>CONTENTS</div>");
    let newId = 0;
    let ids, str, anchor;
    let clsLevel;
    $(".entry-content :header").each(function() {

      switch ($(this)[0].nodeName) {
        case "H3":
          clsLevel = "lv-1";
          break;
        case "H4":
          clsLevel = "lv-2";
          break;
        case "H5":
          clsLevel = "lv-3";
          break;
      }

      //新規にIDをつける
      newId++;
      ids = "t" + newId;
      $(this).attr("id", ids);

      //make item
      str = $(this).text();
      anchor = "<div class='" + clsLevel + "'><a href='#" + ids + "'>" + str + "</a></div>";

      $("#toc").append(anchor);
    });

    //見出しにtocに戻るボタンを設置
    $(".entry-content").find(":header").append("<i class='backToc fa fa-chevron-circle-up' title='TOCへ戻る'></i>");

    $(document).on("click", "#toc a,.backToc", function(e) {
      e.preventDefault();
      if (!$(this).hasClass("backToc")) {
        const targetId = $(this).attr("href");
        const targetPos = $(targetId).offset().top;
        $("html,body").animate({
          scrollTop: targetPos
        }, 600, "swing");
        //console.log(targetId);
      } else {
        const targetPos = $("#toc").offset().top;
        $("html,body").animate({
          scrollTop: targetPos
        }, 600, "swing");
      }
    });
  }
});