adding new script

Still no word on my other ticket (https://kriesi.at/support/topic/issues-with-css-class-targeting-in-firefox-and-edge/)
– I wonder with 45 copies of this theme if there is any premium support options?

Anyway, I was wondering if you could investigate why the following isn’t working. I’m trying to use a combination of Javascript and CSS to achieve tabs. In the child theme directory I created a new folder called ‘js’ and in that folder a script called tabs.js with the following code…

var tabs = document.getElementById('tabs');
var ps = tabs.getElementsByTagName('p');
var p;
var spans;
var span;
var w;
var wTab = 180;

for (var i = 0; i < ps.length; i++)
{   p = ps.item(i);
    spans = p.getElementsByTagName('span');
    for (var j = 0; j < spans.length - 1; j++)
    {   span = spans.item(j);
        w = span.offsetWidth;
        w = Math.ceil(w / wTab) * wTab - w;
        span.style.paddingRight = w + 'px';
    }
}

In the functions.php file I added…

wp_register_script( 'tabs', $template_url.'./js/tabs.js', 'jquery', "1", true);
wp_enqueue_script( 'tabs' );

and then in the page I added in a text block…

<div id="tabs">
<p><span>Date 1</span><span>Event</span></p>
<p><span>Date 2</span><span>Event</span></p>
<p><span>Date 3</span><span>Event</span></p>
</div>'

Because the editor kept removing the span tags I also added the following to the bottom of the <strong>functions.php</strong> file...

function myextensionTinyMCE($init) {
// Command separated string of extended elements
$ext = ‘span[id|name|class|style]’;

// Add to extended_valid_elements if it alreay exists
if ( isset( $init[‘extended_valid_elements’] ) ) {
$init[‘extended_valid_elements’] .= ‘,’ . $ext;
} else {
$init[‘extended_valid_elements’] = $ext;
}

// Super important: return $init!
return $init;
}

add_filter(‘tiny_mce_before_init’, ‘myextensionTinyMCE’ );`