I want to show a block of content if certain checkboxes in a group are selected.

This partially works:

<div x-data="{ show: false }">
  <div>
    <label class="flex" for="category-1">
      <input class="mr-2" type="checkbox" id="category-1" value="A" x-model="show">
      <span class="inline-block">A</span>
    </label>
    <label class="flex" for="category-2">
      <input class="mr-2" type="checkbox" id="category-2" value="B">
      <span class="inline-block">B</span>
    </label>
    <label class="flex" for="category-3">
      <input class="mr-2" type="checkbox" id="category-3" value="C" x-model="show">
      <span class="inline-block">C</span>
    </label>
  </div>
  <div x-show="show" x-collapse>This will be hidden until a checkbox is selected.</div>
</div>

Codepen

But if you check one box, it checks all of them that have x-model on them.

What do I need to do so only the checkbox you click gets checked while also still revealing the content?