title: change and reset menu name dynamically with grouped buttons
body: <p>I have a dropdown with grouped buttons that I'd like to change names when selected. I wrote a short script to change the innerHTML of the OTHER button when it's selected, but I'd also like the button to go back to its original name <code>OTHER</code> if another button in the group is chosen.</p>
  
  <p><a href="https://i.stack.imgur.com/t6Nqo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t6Nqo.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const header = document.getElementById("test");
  const btns = header.querySelectorAll('.btn');
  
  
  for (let i = 0; i &lt; 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")){
          document.getElementById("results").textContent = $(this).attr("value")
      }
  
    });
  }
  
    $(".dropdown-item").click(function () {
           const value = $(this).attr("value");
               document.getElementById('btnGroupDrop1').innerHTML = 
              value + " &lt;span class='caret'&gt;&lt;/span&gt;"
       document.getElementById("results").textContent = value   
     });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-grey {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 18px;
  }
  
  /* Style the active class, and buttons on mouse-over */
  .active, .btn-secondary:hover {
    background-color: #666;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="test"&gt;
    &lt;div class="btn-group" role="group"&gt;
    &lt;button class="btn btn-grey active", type="button", value="NONE"&gt;NONE&lt;/button&gt;
    &lt;button class="btn btn-grey", type="button", value="A"&gt;A&lt;/button&gt;
    &lt;button class="btn btn-grey", type="button", value="B"&gt;B&lt;/button&gt;
    &lt;button class="btn btn-grey", type="button", value="C"&gt;C&lt;/button&gt;
    &lt;div class="btn-group" role="group"&gt;
      &lt;button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        OTHER &lt;span class='caret'&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="dropdown-menu"aria-labelledby="btnGroupDrop1"&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#3" value="D"&gt;D&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#2" value="E"&gt;E&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#2" value="F"&gt;F&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
   
  
  &lt;div id="results"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Codepen here if helpful: <a href="https://codepen.io/mayagans/pen/dyoppZK" rel="nofollow noreferrer">https://codepen.io/mayagans/pen/dyoppZK</a></p>