html video progress bar with js

I'm working with Lectora 17, and I'm trying to figure out a way to have a custom playbar done with html and js.

I'm using a HTML video with the html extensions, and it seems a like most of my javascript is working expect for  2 crucial parts.  The parts that updates the information on screen. I can see it working in console.log perfectly, but when it comes to updating the text on screen with the current time and add on to the width for the progressbar, they appear to be completely being ignored in the 'timeupdate' function. Does Lectora require an extra step to make this work or it needs to be done a different way? I've tested this on a regular HTML setup and it worked perfectly fine. I haven't found anything about this being an issue for anyone.

 

JS

$( document ).ready(function() {

var video = $("video")[0];

//Play/Pause control clicked
$('.btnPlay').on('click', function() {
if(video.paused) {
video.play();
}
else {
video.pause();
}
});

//get HTML5 video time duration
$("video").on('loadedmetadata', function() {
$('.duration').text(video.duration);
});

//update HTML5 video current play time
$("video").on('timeupdate', function() {
var currentPos = video.currentTime; //get currentime
var maxduration = video.duration; //get video duration
var percentage = (100 * currentPos / maxduration)+'%';
$('.currentPos').text(currentPos); //Not working
$('.timeBar').css('width', percentage); //Not working

console.log('currentPos: '+ currentPos);
console.log('percentage: '+ percentage);
});

});