Shiny: keyboard shortcut only in one tabpanel

[denelle]

I have a Shiny app with several tabPanels. In the first one, there is a dropdown with a list of entries. I added two actionButtons called next and previous. By activating them, the next or previous entry is respectively displayed.
With a .js function, I also associated these two actionButtons with keyboard shortcuts (respectively ArrowRight and ArrowLeft).

However, I don't want these two keyboard shortcuts to be functional in the other tabPanels.
How can I specify such a condition in the .js function?

Here is a reproducible example:

library(shiny)
library(shinythemes)

# ArrowLeft and Right buttons
js_pr_next <- '$(document).keyup(function(event) {
    if (event.key == "ArrowLeft") {
        $("#previous_entry").click();
    }
    if (event.key == "ArrowRight") {
        $("#next_entry").click();
    }
});'

# UI
ui <- navbarPage(title = "Title",
                 theme = shinytheme("flatly"),
                 windowTitle = "Navbarpage",
                 id = "navbar",
                 ## tabPanel1 ----
                 tabPanel(
                     title = "Panel1",
                     fluidRow(column(3,
                                     uiOutput("select_entries"),
                                     actionButton("previous_entry", label = "Previous"),
                                     actionButton("next_entry", label = "Next"),
                                     tags$head(tags$script(HTML(js_pr_next)))
                     ),
                     column(9,
                            plotOutput("plot1", height = "500px")))
                 ),
                 
                 ## tabPanel2 ----
                 tabPanel(title = "Panel2")
)

# Server
server <- function(input, output, session) {
    ex_entry <- 1:100
    
    output$select_entries <- renderUI({
        selectizeInput("entry_list", "Entry list:",
                       options = list(maxOptions = length(ex_entry)),
                       choices = ex_entry,
                       selected = 50)
        
    })

    # Previous entry
    observeEvent(input$previous_entry, {
        current <- which(ex_entry == input$entry_list)
        if(current > 1){
            updateSelectizeInput(session, "entry_list",
                                 choices = ex_entry,
                                 selected = ex_entry[current - 1],
                                 options = list(maxOptions = length(ex_entry)))
        }
    })
    # Next
    observeEvent(input$next_entry, {
        current <- which(ex_entry == input$entry_list)
        if(current < length(ex_entry)){
            updateSelectizeInput(session, "entry_list",
                                 choices = ex_entry,
                                 selected = ex_entry[current + 1],
                                 options = list(maxOptions = length(ex_entry)))
        }
    })
    
    init <- reactive({
        req(input$entry_list)
    })
    
    observe({
        selected_entry <- init()
        
        output$plot1 <- renderPlot({
            plot(1:selected_entry, pch = 16,
                 main = as.character(selected_entry))
        })
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

Edit
I have tried something like this but it does not work:

# ArrowLeft and Right buttons
js_pr_next <- '$(document).keyup(function(event) {
    if (document.getElementById("id_panel1").is(":focus"){
    if (event.key == "ArrowLeft") {
        $("#previous_entry").click();
    }
    if (event.key == "ArrowRight") {
        $("#next_entry").click();
    }
    }
});'