Code insert not updating

I’m trying to insert a table of contents on my blog post:

Originally, I’ve took the code from here:


   var contentsTitle = "Contents"; // Set your title here, to avoid making a heading for it later
	var ToC = "<h2>"+contentsTitle+"</h2>";
    ToC += '<nav role="navigation" class="table-of-contents"><ul>';
    var first = false;
    document.querySelectorAll('h2,h3').forEach(function(el,index) {
        if (first === false) {
        	first = true;
            var newSpan = document.createElement("SPAN");
            el.parentNode.insertBefore(newSpan, el);
		var title = el.textContent;
		var link = '#' +;
        if (el.nodeName === 'H2') {
			ToC += '<li><a href="' + link + '">' + title + '</a></li>';
        } else if (el.nodeName === "H3"){
        	ToC += '<li style="margin-left:2em"><a href="' + link + '">' + title + '</a></li>';
	ToC += '</ul></nav>';
    ToC += '<style>#dynamictocnative { width: 100%; }</style>';
    var tocDiv = document.getElementById('dynamictocnative');
    tocDiv.innerHTML = ToC;

This worked well. However, I wanted to change some minor design stuff (inserting dots after the toc, and highlighting the text in blue) so I got this code from our dev:

var links = $('<div/>').append($('<h2/>').text('Contents')).append($('<ul/>'));
$("h2.toc-index").each(function(index) {
    $(this).attr('id', index)
    $('<li/>').append($('<a/>').text($(this).text()).attr('href', '#'+$(this).attr('id')).css('color','blue')).appendTo(links)

Which I tried inserting onto my blog post via code insert in the footer. But now 5 days later, I can still find the old code when inspecting my page and the new code doesn’t seem to be there at all.

Screenshot 2020-06-16 at 17.22.24

Anyone have any ideas?

Hi @Viktor_Nordmark :wave:
I’m not sure JavaScript is the best thing to use to make these adjustments, you’d be better off using CSS to make these changes. Do you know what you want your table of contents to look like?