How to create a backdrop using the jQuery TourBus plugin?

this is a followup question to an earlier question.

I'm trying to create a backdrop for the tour that guides through my website using jQuery Tourbus, where it highlights the div that it is pointing to and dims the background. The plugin developer provides an example for this. I'm trying to implement the same but it doesn't seem to work. The tour loads as usual. but it neither creates a backdrop nor highlights the div it is pointing to.

This is my jQuery code -

<script type="text/javascript">
$(document).ready( function() {
   var tour = $('#my-tour-id').tourbus( {
      onLegStart: function( leg, bus ) {
         if( leg.rawData.highlight ) {
         leg.$target.addClass('my-tour-highlight');
         $('.my-tour-overlay').show();
      }
   },
      onLegEnd: function( leg, bus ) {
         if( leg.rawData.highlight ) {
         leg.$target.removeClass('my-tour-highlight');
         $('.my-tour-overlay').hide();
      }
   }
 });
 tour.trigger('depart.tourbus');
 console.log("load");
} );
</script>

CSS -

<style>
    .my-tour-overlay {
       display: none;
       background: #666;
       opacity: 0.5;
       z-index: 9997;
       min-height: 100%;
       height: 100%;
       position: fixed;
       top: 0; right: 0; bottom: 0; left: 0;
   }

   .my-tour-highlight {
       background: white;
       position: relative;
       border-radius: 4px;
       box-shadow: inset 0 0 2px rgba( 0, 0, 0, 0.2 );
       z-index: 9998;
   }
</style>

HTML -

<ol class='tourbus-legs' id='my-tour-id'>
  <li data-orientation='centered' data-width='400'>
    <p>Hello</p>
    <a href='javascript:void(0);' class='tourbus-next'>Next</a>
  </li>
  <li data-el='#stuff' data-orientation='top' data-width='400'>
    <p>That's awesome</p>
    <a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
    <a href='javascript:void(0);' class='tourbus-next'>Next</a>
  </li>
  <li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
    <p>Bye</p>
    <a href='javascript:void(0);' class='tourbus-stop'>End!</a>
  </li>
</ol>

As you can see, I'm following the instructions as they are. What could be going wrong? Thanks!

EDIT - Thanks to @charlietfl, I was able to create a backdrop. However, the element that is being pointed to by the tour leg is not being highlighted and instead is dimmed like the rest of the backdrop.

The changes I've made are to my HTML code. I've added data-highlight="true" to <li data-el='#stuff' data-orientation='top' data-width='400'> and also added this at the end of the ordered list for tourlegs - <div class="my-tour-overlay" style="display: block;"></div>

How can I highlight the element during the tour and separate it from the backdrop? Thanks!