Undefined type error for variable - need help

Undefined type error for variable - need help

I'm getting a type error: lastSelectedRow is undefined.

What I'm trying to do is allow the user to select multiple rows of a table using Shift+Click. I was searching for an example and came across this article:


I implemented one of the examples with jquery.

Here is the code I'm trying:

  1. j$ = jQuery.noConflict();
  2. j$(document).ready(function() {
     
     if(j$) {
      //alert('Jquery loaded successfully...');
     }
     console.log(j$('input[id$=btnSearch]'));
     j$('input[id$=btnSearch]').click(function(){
      console.log(j$('[id$=searchTable] > tbody tr'));
      var trs = j$('[id$=searchTable] > tbody tr');
      j$('tr').on('click', function(myEvent){
       //call the RowClick function on click event
       RowClick(j$(this),false,trs,myEvent)
      })
     });  
    });
  3. //declare variable to store the most recently clicked row
    var lastSelectedRow;
  4. // disable text selection
    document.onselectstart = function() {
        return false;
    }
  5. function RowClick(currentrow, lock, rows, myEvent) {
     console.log('******************************************* we are inside the RowClick function');
     console.log(currentrow);
     console.log(lock);
     console.log(rows);
     console.log(myEvent);
        //if control is held down, toggle the row
        if (myEvent.ctrlKey) {
            toggleRow(currentrow);
        }
  6.     //if there are no buttons held down...
        if (myEvent.button === 0) {
  7.         //if neither control or shift are held down...
            if (!myEvent.ctrlKey && !myEvent.shiftKey) {
                //clear selection
                clearAll(rows);
                //toggle clicked row
                toggleRow(currentrow);
            }
  8.         //if shift is held down...
            if (myEvent.shiftKey) {
       console.log('************************************** we are in the shift key branch');
       console.log(lastSelectedRow);
       console.log(lastSelectedRow.index());
       console.log(currentrow);
       console.log(currentrow.index());
       console.log(rows);
                //pass the indexes of the last selected row and currently selected row along with all rows
                selectRowsBetweenIndexes([lastSelectedRow.index(), currentrow.index()], rows)
            }
        }
    }
  9. function toggleRow(row) {
        if (!row.hasClass('header-row')){
            lastSelectedRow = row.toggleClass('selected');
        }
    }
  10. function selectRowsBetweenIndexes(indexes,rows) {
        //sort the indexes in ascending order
        indexes.sort(function(a, b) {
            return a - b;
        });
  11.     //for every row starting at the first index, until the second index...
        for (var i = indexes[0]; i <= indexes[1]; i++) {
            //select the row
            j$(rows[i+1]).addClass('selected');
        }
    }
  12. function clearAll(rows) {
     j$('.selected').removeClass('selected');
    }
The user runs a search by clicking the search button "btnSearch" and a table is dynamically generated with the search results. I store the table rows into a variable "trs" and pass the current table row, the event and the value stored in the table rows varaible into the RowClick function as arguments. From the debug, everything runs fine until I click on a row, then I get lastSelectedRow undefined. I'm using the minified version of jquery 3.3.1.

Any help is appreciated.
Thanks.