Adding h3 to a TOC

Design help Custom code
1

Hey guys
For our blog’s CMS, I have the following code which draws the h2s form the post and puts them into a TOC (see a live example here):
HEAD TAGS:

<style>
html {scroll-behavior:smooth;}
.table-of-contents ul {
list-style-type: none;
counter-reset:myCounter;
line-height:30px
}

.table-of-contents ol, .table-of-contents ul { padding-left: 0px; }

.table-of-contents ul li::before {
color:white;
content: counter(myCounter);
display:inline-flex;
position:absolute;
left:-35px;
width: 30px;
height: 30px;
max-height: 30px;
max-width: 30px;
min-height: 30px;
min-width: 30px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 90px;
background-color: #4aaec2;
background-image: none;
background-size: auto;
-webkit-transition: none 0s ease;
transition: none 0s ease;
font-size: 18px;
font-weight:700;
margin-right:10px;

}

</style>

BODY TAGS:

<script>
var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h4 class='text-block-24'>Contents:</h4>" +
    "<ul>";

var newLine, el, title, link;

$(".main-review-section h2").each(function() {
  $(this).attr('id', $(this).text());
  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

  newLine =
    "<li>" +
      "<a class='contents-link' href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;

    });

ToC +=
   "</ol>" +
  "</nav>";

$(".div-block-38").prepend(ToC);
</script>

Does anyone know what code to include so that it draws h3’s and adds those to the TOC as well?

Any help would be massively appreciated :slight_smile:

read only: Webflow - Dream Big, Travel Far