Shiny: linking outputBinding with output (issue with multiple outputs)

app.R

library(shiny)


redOutput <- function(inputId) {
  tagList(
      singleton(tags$head(tags$script(src="red.js"))),
      div(id=inputId, class='redOutput')
  )
}

renderRed <- function(expr, env=parent.frame(), quoted=FALSE) {
    installExprFunction(expr, "func", env, quoted)
    
    function() {
        jsonlite::toJSON(func())
    }
}

blueOutput <- function(inputId) {
  tagList(
      singleton(tags$head(tags$script(src="blue.js"))),
      div(id=inputId, class='blueOutput')
  )
}

renderblue <- function(expr, env=parent.frame(), quoted=FALSE) {
    installExprFunction(expr, "func", env, quoted)
    
    function() {
        jsonlite::toJSON(func())
    }
}



# Define UI for application that draws a histogram
ui <- fluidPage(
    actionButton('go','GO!'),
    redOutput('red'),
    blueOutput('blue')
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    
    output$red <- renderRed(paste('red', input$go))
    output$blue <- renderRed(paste('blue', input$go))
    
}

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

blue.js

// linechart-binding.js

// Put code in an Immediately Invoked Function Expression (IIFE).
// This isn't strictly necessary, but it's good JavaScript hygiene.
(function() {

// See http://rstudio.github.io/shiny/tutorial/#building-outputs for
// more information on creating output bindings.

// First create a generic output binding instance, then overwrite
// specific methods whose behavior we want to change.
var binding = new Shiny.OutputBinding();

$.extend(binding, {

  find: function(scope) {
    // For the given scope, return the set of elements that belong to
    // this binding.
    return $(scope).find(".blueOutput");
  },

  renderValue: function(el, data) {
    // This function will be called every time we receive new output
    // values for a line chart from Shiny. The "el" argument is the
    // div for this particular chart.
    
    $(el).append('<span style="color: blue">' + data[0] + '</span>');
  },
  
});

// Tell Shiny about our new output binding
Shiny.outputBindings.register(binding, "temp.blue");

})(); // End IIFE

red.js

// linechart-binding.js

// Put code in an Immediately Invoked Function Expression (IIFE).
// This isn't strictly necessary, but it's good JavaScript hygiene.
(function() {

// See http://rstudio.github.io/shiny/tutorial/#building-outputs for
// more information on creating output bindings.

// First create a generic output binding instance, then overwrite
// specific methods whose behavior we want to change.
var binding = new Shiny.OutputBinding();

$.extend(binding, {

  find: function(scope) {
    // For the given scope, return the set of elements that belong to
    // this binding.
    return $(scope).find(".redOutput");
  },

  renderValue: function(el, data) {
    // This function will be called every time we receive new output
    // values for a line chart from Shiny. The "el" argument is the
    // div for this particular chart.
    
    $(el).append('<span style="color: red">' + data[0] + '</span>');
  },
  
});

// Tell Shiny about our new output binding
Shiny.outputBindings.register(binding, "temp.red");

})(); // End IIFE