title: All drop-down menus' text content change at the same time instead of updating separately
body: <p>I have three drop-down menus on my site that I created via Bootstrap.
  <a href="https://i.stack.imgur.com/M7sTF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M7sTF.png" alt="enter image description here" /></a>
  Ideally, when a user clicks on a drop-down menu and selects one of the inner menu items, the drop-down menu should update its text content to the text content of the selected menu item.</p>
  <p><a href="https://i.stack.imgur.com/sjHus.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sjHus.png" alt="enter image description here" /></a></p>
  <p>However, for any drop-down menu, if a user clicks on a menu item, all three drop-down menus' text content update instead of only that individual drop-down menu as seen below
  <a href="https://i.stack.imgur.com/3CIk1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3CIk1.png" alt="enter image description here" /></a></p>
  <p>My current approach is that the <code>aria-expanded</code> attribute for each drop-down button changes to <code>true</code> if a drop-down is open on a button. If the <code>aria-expanded</code> value of a specific drop-down menu is <code>true</code>, then that button's text content changes to the text content of the selected menu item.</p>
  <p><strong>JS</strong></p>
  <pre class="lang-js prettyprint-override"><code>function addPlanesToDropDowns() {
    let dropdowns = document.querySelector('.dropdown-menu');
    let dropDownButtonOne = document.querySelector('#dropdownMenuButtonOne');
    let dropDownButtonTwo = document.querySelector(&quot;#dropdownMenuButtonTwo&quot;);
    let dropDownButtonThree = document.querySelector(&quot;#dropdownMenuButtonThree&quot;);
    dropDownDisabledCheck();
  
    for (let i = 0; i &lt; state.airplaneData.length; i++) {
      let dropDownMenuItem = document.createElement('a');
      dropDownMenuItem.classList.add('dropdown-item');
      dropDownMenuItem.href = '#';
      dropDownMenuItem.textContent = state.airplaneData[i].make + &quot; &quot; + state.airplaneData[i].model;
  
      dropDownMenuItem.addEventListener('click', function (event) {
        event.preventDefault();
  
        if (dropDownButtonOne.getAttribute('aria-expanded')) {
          dropDownButtonOne.textContent = dropDownMenuItem.textContent;
          dropDownButtonOne.setAttribute('aria-expanded', false);
        }
        if (dropDownButtonTwo.getAttribute('aria-expanded')) {
          dropDownButtonTwo.textContent = dropDownMenuItem.textContent;
          dropDownButtonTwo.setAttribute('aria-expanded', false);
        }
        if (dropDownButtonThree.getAttribute('aria-expanded')) {
          dropDownButtonThree.textContent = dropDownMenuItem.textContent;
          dropDownButtonThree.setAttribute('aria-expanded', false);
        }
        dropDownDisabledCheck();
      });
      dropdowns.appendChild(dropDownMenuItem);
    }
  }
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>       &lt;div class=&quot;dropdown&quot;&gt;
              &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButtonOne&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Plane 1&lt;/button&gt;
              &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButtonTwo&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Plane 2&lt;/button&gt;
              &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButtonThree&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Plane 3&lt;/button&gt;
              &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                  &lt;!-- &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Planes go here&lt;/a&gt; --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Despite this, all three drop-down menus update with the same selected menu item text content even though I am only setting the text content on the button element with the specific ID attribute.</p>