I'm making a flexdashboard and would like parallel tabsets, so that when a tab is clicked in one row, the nth tab is also opened in the section row. I have tried to work from a very similar SO example (Change second tabset on click in flexdashboard), but when I knit, there is no effect from the javascript - the behavior is unchanged.

Here is the specific answer I am trying to implement:

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---
    
    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```
    
    ```{js}
    document.addEventListener("DOMContentLoaded", function(){
        $('a[data-toggle="tab"]').on('click', function(e){
          // find the tab index that is click
          child = e.target.parentNode;
          tabnum = Array.from(child.parentNode.children).indexOf(child);
          // find in which column we are
          column = $(e.target).closest("div[id]");
          // show the same tab in the other column
          columnid = column.attr("id");
          if (columnid == "column") {
            columnto = "column-1";
          } else {
            columnto = "column";
          }
          $("div[id="+columnto+"] li:eq("+tabnum+") a").tab('show');
        })
    });
    ```
    
    Column {.tabset}
    -----------------------------------------------------------------------
    
    ### Chart A1
    
    This is a text
    
    ### Chart B1
    
    ```{r}
    plot(iris)
    ```
    
    
    Column {.tabset}
    -----------------------------------------------------------------------
    
    ### Chart A2
    
    ```{r}
    plot(mtcars)
    ```
    
       ### Chart B2
    
       This is another text
    
    ```