Highlighting a new dom element using intro.js

Question

I'm using intro.js for the 'tour' for my web app. Since I'm trying to make this a quite user - interactive tour, I'm allowing the users to interact with the highlighted DOM elements on various steps.

There is a table with rows and columns in my app. Right-clicking a row shows a small 'options' div from which the user can choose to add a new row above/below the current row. When I begin the tour, I highlight the first row. Since I'm making this an interactive tour, I'm allowing the user to add a new row. My question is - how do I highlight the newly added row along with the selected row in the same step? The series of steps should be something like this:-

STEP 1: (highlight something)

STEP 2:- Highlight a row. If user adds a new row (by right-clicking the current row and selecting 'Add a row above/below'), highlight the new row as well.

STEP 3:- (highlight something)

Answer 1

Here's a working demo: http://jsfiddle.net/951ym964/2/

You have to call introJs().refresh() when rows are added.

Also, you have to use tbody to wrap the rows you want to highlight.