title: Keep buttons from different parent divs active at the same time
body: <p>I want to keep buttons from different parent divs active at the same time, just like:
  <a href="https://i.stack.imgur.com/jeYyg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jeYyg.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/QvzkJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QvzkJ.png" alt="enter image description here" /></a></p>
  <p>On my project, I can't select Limit and Cross 3x at the same time, for example. When one button gets focused, the other from another parent div does not remain active.</p>
  <p>Is there a way to do that? I'm using TailwindCSS and AlpineJS on this project.
  Here's my code:</p>
  <pre><code>&lt;div class=&quot;px-16 py-6 mt-2 bg-white shadow-sm&quot;&gt;
        &lt;div&gt;
           &lt;div class=&quot;sm:hidden&quot;&gt;
              &lt;select aria-label=&quot;Selected tab&quot; class=&quot;block w-full form-select&quot;&gt;
                 &lt;option selected&gt;Spot&lt;/option&gt;
                 &lt;option&gt;Cross 3x&lt;/option&gt;
                 &lt;option&gt;Isolada 10x&lt;/option&gt;
              &lt;/select&gt;
           &lt;/div&gt;
           &lt;div class=&quot;hidden sm:block md:flex md:flex-row md:justify-between&quot;&gt;
              &lt;nav class=&quot;flex&quot;&gt;
                 &lt;button type=&quot;button&quot; class=&quot;px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50&quot; autofocus aria-current=&quot;page&quot;&gt;
                    Spot
                 &lt;/button&gt;
                 &lt;button type=&quot;button&quot; class=&quot;px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50&quot;&gt;
                    Cross 3x
                 &lt;/button&gt;
                 &lt;button type=&quot;button&quot; class=&quot;px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50&quot;&gt;
                    Isolada 10x
                 &lt;/button&gt;
              &lt;/nav&gt;
              &lt;!-- Dots Vertical --&gt;
              &lt;div class=&quot;hidden md:flex&quot; id=&quot;nav-heading&quot; aria-labelledby=&quot;nav-heading&quot; x-data=&quot;{ dotsOpen: false }&quot; :aria-expanded=&quot;dotsOpen&quot;&gt;
                 &lt;button type=&quot;button&quot; :aria-expanded=&quot;dotsOpen&quot; aria-controls=&quot;nav-list&quot; @mouseenter=&quot;dotsOpen = !dotsOpen&quot; @click.away=&quot;dotsOpen = false&quot;&gt;
                    &lt;svg class=&quot;w-6 h-6 text-gray-600&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                       &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot;&gt;&lt;/path&gt;
                    &lt;/svg&gt;
                 &lt;/button&gt;
                 &lt;div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10=&quot;dotsOpen&quot; id=&quot;nav-list&quot; class=&quot;absolute z-10 w-auto mt-8 -ml-8 origin-right rounded-md shadow-lg&quot;&gt;
                    &lt;!--
                       Dots dropdown panel, show/hide based on dropdown state.
                    --&gt;
                    &lt;div @mouseleave=&quot;dotsOpen = !dotsOpen&quot; class=&quot;py-1 bg-white rounded-md shadow-xs&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;user-menu&quot;&gt;
                       &lt;button type=&quot;button&quot; class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                          &lt;p class=&quot;flex justify-start font-medium&quot;&gt;Regras de Trading&lt;/p&gt;
                       &lt;/button&gt;
                       &lt;a href=&quot;#&quot; class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                          &lt;p class=&quot;flex justify-start font-medium&quot;&gt;FAQ&lt;/p&gt;
                       &lt;/a&gt;
                       &lt;button type=&quot;button&quot; class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                          &lt;p class=&quot;flex justify-start font-medium&quot;&gt;Spot Tutorial&lt;/p&gt;
                       &lt;/button&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;div class=&quot;sm:hidden&quot;&gt;
              &lt;select aria-label=&quot;Selected tab&quot; class=&quot;block w-full py-2 pl-3 pr-10 mt-2 text-base leading-6 transition duration-150 ease-in-out border-gray-300 form-select focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5&quot;&gt;
                 &lt;option selected&gt;Limit&lt;/option&gt;
                 &lt;option&gt;Make Order&lt;/option&gt;
                 &lt;option&gt;Stop-limit&lt;/option&gt;
              &lt;/select&gt;
           &lt;/div&gt;
           &lt;div class=&quot;hidden sm:block&quot;&gt;
              &lt;div class=&quot;border-b border-gray-200&quot;&gt;
                 &lt;nav class=&quot;flex mt-1 -mb-px&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500&quot; autofocus aria-current=&quot;page&quot;&gt;
                       Limit
                    &lt;/button&gt;
                    &lt;button type=&quot;button&quot; class=&quot;px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500&quot;&gt;
                       Make Order
                    &lt;/button&gt;
                    &lt;div class=&quot;flex flex-row items-center justify-center ml-8&quot; id=&quot;nav-heading&quot; aria-labelledby=&quot;nav-heading&quot; x-data=&quot;{ stopLimitOpen: false }&quot; :aria-expanded=&quot;stopLimitOpen&quot;&gt;
                       &lt;svg class=&quot;pb-0.5 w-4 h-4&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z&quot;&gt;&lt;/path&gt;
                       &lt;/svg&gt;
                       &lt;button type=&quot;button&quot; class=&quot;px-1 py-2 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500&quot;&gt;
                          Stop-limit
                       &lt;/button&gt;
                       &lt;button class=&quot;pb-0.5 focus:outline-none&quot; type=&quot;button&quot; :aria-expanded=&quot;stopLimitOpen&quot; aria-controls=&quot;nav-list&quot; @mouseenter=&quot;stopLimitOpen = !stopLimitOpen&quot; @click.away=&quot;stopLimitOpen = false&quot;&gt;
                          &lt;svg class=&quot;w-3 h-3 ml-1 cursor-pointer&quot; fill=&quot;currentColor&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                             &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M19 9l-7 7-7-7&quot;&gt;&lt;/path&gt;
                          &lt;/svg&gt;
                       &lt;/button&gt;
                       &lt;div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10=&quot;stopLimitOpen&quot; id=&quot;nav-list&quot; class=&quot;absolute z-10 w-auto origin-center rounded-md shadow-lg mt-28&quot;&gt;
                          &lt;!--
                             Stop Limit dropdown panel, show/hide based on dropdown state.
                          --&gt;
                          &lt;div @mouseleave=&quot;stopLimitOpen = !stopLimitOpen&quot; class=&quot;py-1 bg-white rounded-md shadow-xs&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;user-menu&quot;&gt;
                             &lt;button type=&quot;button&quot; class=&quot;block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                &lt;p class=&quot;flex justify-start font-medium&quot;&gt;Stop-Limit&lt;/p&gt;
                             &lt;/button&gt;
                             &lt;button type=&quot;button&quot; class=&quot;block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                &lt;p class=&quot;flex justify-start font-medium&quot;&gt;OCO&lt;/p&gt;
                             &lt;/button&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/nav&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Buy/Sell Bitcoin Table --&gt;
        &lt;div class=&quot;grid grid-cols-2 gap-16 mt-4&quot;&gt;
           &lt;div class=&quot;col-span-1&quot;&gt;
              &lt;div class=&quot;flex flex-row items-center justify-between&quot;&gt;
                 &lt;h4&gt;Comprar BTC&lt;/h4&gt;
                 &lt;div class=&quot;flex flex-row items-center justify-center&quot;&gt;
                    &lt;svg aria-label=&quot;Lista&quot; data-balloon-pos=&quot;up&quot; id=&quot;show-tip&quot; class=&quot;w-5 h-5 text-gray-600&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                       &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z&quot;&gt;&lt;/path&gt;
                    &lt;/svg&gt;&amp;nbsp;
                    &lt;p class=&quot;text-gray-600&quot;&gt;- USDT&lt;/p&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-span-1&quot;&gt;
              &lt;div class=&quot;flex flex-row items-center justify-between&quot;&gt;
                 &lt;h4&gt;Vender BTC&lt;/h4&gt;
                 &lt;div class=&quot;flex flex-row items-center justify-center&quot;&gt;
                    &lt;svg aria-label=&quot;Lista&quot; data-balloon-pos=&quot;up&quot; id=&quot;show-tip&quot; class=&quot;w-5 h-5 text-gray-600&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                       &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z&quot;&gt;&lt;/path&gt;
                    &lt;/svg&gt;&amp;nbsp;
                    &lt;p class=&quot;text-gray-600&quot;&gt;- USDT&lt;/p&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>