title: two x-data in one div
body: <p>I'm trying to learn AlpineJS with HTML. It's very easy to hide/show one div. But when I try to make 2 items in the same div (dis)appear it doesn't work for the second one. I'm assuming it's an easy fix but I can't really find the answer somewhere. Here's my code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;script defer src=&quot;https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Testpage&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div 
          x-data=&quot;{ isOpen: true }&quot;
          x-data=&quot;{ isOpen2: true }&quot;&gt;
          &lt;button @click=&quot;isOpen = !isOpen&quot; class=&quot;bg-slate-300 border-black border-4 mt-5&quot;&gt;BUTTON 1&lt;/button&gt;
          &lt;br&gt;
          &lt;button @click=&quot;isOpen2 = !isOpen2&quot; class=&quot;bg-slate-300 border-black border-4 mt-5 mb-5&quot;&gt;BUTTON 2&lt;/button&gt;
          &lt;h1 x-show=&quot;isOpen&quot;&gt;TEXT 1&lt;/h1&gt;
          &lt;h1 x-show=&quot;isOpen2&quot;&gt;TEXT 2&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Does anyone know how I can best make this work?</p>