R Shiny - Tracking the active tab in a tabset using JQuery

The app below contains two vertical tabsets. I would like to keep track of the active tab for each. I am using the following JQuery function to do this:

function getActiveTab(ns, id) {
  $('#' + ns + id).click(function() {

    var active = $(this).next('a.active').data('value');

    Shiny.setInputValue(ns + 'active_tab', active);

  });
}

However, it doesn't seem to return anything when I check the inspector in Chrome. I'm not sure if it's because I'm using the wrong selector (wasn't sure if it would be better to use children or find instead of next - I've tried all three to no avail.) or if the source is being loaded properly when the app starts up and was wondering if someone could shed some light?

Here is the full app:

library(shiny)
library(shinyWidgets)
library(shinyjs)

# MODULE 1 ----------------------------------------------------------------

modUI <- function(id) {

  ns <- NS(id)

  tagList(

    verticalTabsetPanel(
      id = ns('tabs'), contentWidth = 8, 
      verticalTabPanel(
        id = ns('tab1'),
        title = ns('tab1'), ''
      ),
      verticalTabPanel(
        id = ns('tab2'),
        title = ns('tab2'), ''
      )
    )
  )

}

modServer <- function(input, output, session) {
  ns = session$ns
  shinyjs::runjs(sprintf("getActiveTab(ns = '%s', id = '%s');", ns(''), 'tabs'))
  observe(print(input$active_tab))
}


# MAIN APP ----------------------------------------------------------------

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    tags$head(tags$script("function getActiveTab(ns, id) {
  $('#' + ns + id).on('click', function(el) {

    var active_tab = el.find('a.active').data('value');

    Shiny.setInputValue(ns + 'active_tab', active_tab);

  });
}")),
    modUI('mod1'), modUI('mod2')
  ),

  server = function(input, output) {
    callModule(modServer, 'mod1')
    callModule(modServer, 'mod2')
  }
)