Step Number not advancing on multip page tour.

[DougAGault]

I've build a simple multi-page tour that I'm going to demo to my team soon. I've got everything pretty much working apart form the fact that the step numbers don't advance (even though I move on to the next step) across the pages of the site.

On step 3 I want the user to click on a navigation item to move the tour forward.
Similarly on Step 4 I want them to click on a button to do the same

The step number gets stuck on '3' even once i've moved to step 4 and 5... It's only once I resume on moving forward on a single page that the step numbers start advancing again.

attached is my tour code:

hopscotch.registerHelper('fillText', function(textFieldId, textStr) {
document.getElementById(textFieldId).value = textStr;
});
var tour = {
id: "Sample-Tour",
nextOnTargetClick: true,
steps: [{
title: "Navigation Control",
content: "The Navigation Control lets you expand and collapse the Navigation Menu.",
target: document.querySelector('#t_Button_navControl'),
placement: "bottom",
},
{
title: "Navigation",
content: "The Navigation menu lets you move around the application.
",
target: "t_Body_nav",
placement: "right"
},
{
title: "Navigate to Store",
content: "Lets create a new store.
Navigate to the Stores page by clikcing the link to the left",
target: "#t_TreeNav_3",
placement: "right",
multipage: true,
showNextButton: false
},
{
title: "Store Button",
content: "To create a new store, click the Add Store button",
target: document.querySelector('#add_store_button'),
placement: "left",
multipage: true,
showNextButton: false
},
{
title: "New Store",
content: "Here you can enter the detials for a store the details for the store. ",
target: document.querySelector('#P7_STORE_NAME_LABEL'),
placement: "bottom",
delay: 1000,
onShow: ["fillText", "P7_STORE_NAME", "Granny's Convenience Market"]
},
{
title: "New Store",
content: "And the date the store opened. ",
target: document.querySelector('#P7_STORE_OPEN_DATE_LABEL'),
placement: "bottom",
onShow: ["fillText", "P7_STORE_OPEN_DATE", "25-Jan-2018"]
},
{
title: "New Store",
content: "The red asterisk (*) indicates required fields. ",
target: document.querySelector('#P7_STORE_ADDRESS_LABEL'),
placement: "left"
}
]
};
addClickListener = function(el, fn) {
if (el.addEventListener) {
el.addEventListener('click', fn, false);
} else {
el.attachEvent('onclick', fn);
}
},
startBtnEl = document.getElementById("startTour");
if (startBtnEl) {
addClickListener(startBtnEl, function() {
if (!hopscotch.isActive) {
hopscotch.startTour(tour);
}
});
} else {
// Assuming we're on page 2.
if (hopscotch.getState() != "Sample-Tour:1") {
// tour id is hello-hopscotch and we're on the second step. sounds right, so start the tour!
hopscotch.startTour(tour);
}
}