Group Buttons AND dropdown menu

App.R

library(shiny)
library(shinyjs)

source("group_and_radio.R")

css <- ".btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: white;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

.dropdown-item {
    width: 100%;
}"

ui <- fluidPage(
    
    inlineCSS(css),

    sidebarLayout(
        sidebarPanel(
            HTML(group_and_radio_html),
            verbatimTextOutput("debug"),
            tags$script(src="script.js")
        ),
        
        mainPanel(
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
    output$debug <- renderText(input$grp_btn_and_dropdown)
}

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

group_and_radio.R

group_and_radio_html <- "<div id='test'>
  <div class='btn-group' role='group'>
  <button class='btn btn-grey active', type='button', value='NONE'>NONE</button>
  <button class='btn btn-grey', type='button', value='A'>A</button>
  <button class='btn btn-grey', type='button', value='B'>B</button>
  <button class='btn btn-grey', type='button', value='C'>C</button>
  <div class='btn-group' role='group'>
    <button id='btnGroupDrop1' type='button' class='btn btn-grey dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
      OTHER <span class='caret'></span>
    </button>
    <div class='dropdown-menu' aria-labelledby='btnGroupDrop1'>
      <li><a class='dropdown-item' value='D'>D</a></li>
                 <li><a class='dropdown-item' value='E'>E</a></li>
                 <li><a class='dropdown-item' value='F'>F</a></li>
                     </div>
                     </div>
                     </div>"

script.js

const header = document.getElementById("test");
const btns = header.querySelectorAll('.btn');


for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    console.log();
    // Set results to value, unless it's other
  // then set to the value of the selected dropdown
    if($(this).attr("value")){
        Shiny.setInputValue('grp_btn_and_dropdown', $(this).attr("value"))
    }

  });
}

$(".dropdown-item").click(function () {
         const value = $(this).attr("value");
         Shiny.setInputValue('grp_btn_and_dropdown', value)
});