Table of Content from another page

Themes
1

Hi everyone,

I’m currently trying to implement a toc on page A that takes the content from page B. As you can see in the picture, this toc I would like to show on another page (every blog post).
ToC

The code I’m currently using (header):

<script src="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css" rel="stylesheet">
<style>.gh-content{position:relative}.gh-toc>.toc-list{position:relative}.toc-list{overflow:hidden;list-style:none}@media (min-width:1300px){.gh-sidebar{position:absolute;top:0;bottom:0;margin-top:4vmin;grid-column:wide-start / main-start}.gh-toc{position:sticky;top:4vmin}li.toc-list-item{font-size:1.4rem}}.gh-toc .is-active-link::before{background-color: #3897d3}a.toc-link{display:inline-flex;font-weight:400;height:100%;line-height:1.2em;padding:6px 0;text-decoration:none;transition:.4s ease;font-size:100%!important}li.toc-list-item{color:#738a94!important}a.toc-link:hover{color:#3897d3!important}.is-collapsible a.is-active-link,a.is-active-link{color:#3897d3!important;font-weight:500}@media (max-width:1400px){.gh-toc{background:#fff;border-radius:1em;box-shadow:0 10px 50px rgba(25,37,52,.14),0 2px 5px rgba(25,37,52,.03);padding:30px;width:100%}}</style>

<style>
    h3 {text-align: center;}
</style>

Footer Code:

<script>
    tocbot.init({
        tocSelector: '.toc',
        linkClass: 'toc-link',
        orderedList: true,
        headingSelector: 'h2, h3',
        collapseDepth: 1,
        contentSelector: '.c-content',
        ignoreSelector: '.kg-header-card > *',
        headingsOffset: 40,
        scrollSmooth: true,
		scrollSmoothDuration: 420,
  		scrollSmoothOffset: -40,
        hasInnerContainers: true
    });
</script>

<script>document.addEventListener('DOMContentLoaded',function(){var contentElement=document.querySelector('.gh-content');if(contentElement){var asideElement=document.createElement('aside');asideElement.className='gh-sidebar';asideElement.innerHTML='<div class="gh-toc"></div>';var firstChildElement=contentElement.firstElementChild;if(firstChildElement){firstChildElement.insertAdjacentElement('beforebegin',asideElement)}else{contentElement.appendChild(asideElement)}tocbot.init({tocSelector:'.gh-toc',contentSelector:'.gh-content',headingSelector:'h1,h2,h3,h4',hasInnerContainers:true})}});</script>

Does anyone know how to do that (preferably with code injection)? Also, how can I add a title above the toc e.g., “Table of Content”?

Thanks a lot in advance! Best,
AB