为什么“阅读更多”会在另一个链接框的“阅读更多”中打开链接列表？

Question

我在我的 Wordpress 网站的页脚中放置了两个链接框，一个挨着另一个，每个有 20 个链接（Box1 和 Box2）。每个框显示 5 个链接，并通过“阅读更多”按钮隐藏其他 15 个链接。单击此按钮时，隐藏的 15 个链接应折叠或出现。

问题是，无论我点击哪个“阅读更多”按钮，无论是 Box1 还是 Box2，只有 Box1 中的链接出现/折叠。

你能帮我看看我错在哪里吗？请查看下面的代码。谢谢！

PS：这是我在网上找到的 CSS 代码，我尽量避免使用 JS 代码

.read-more-state {
  display: none;
  text-decoration: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  /*transition: .15s ease;*/
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state~.read-more-trigger:before {
  content: 'More...';
}

.read-more-state:checked~.read-more-trigger:before {
  content: 'Less...';
}

.read-more-trigger {
  cursor: pointer;
  /*display: inline-block;
  line-height: 2;
  border: 1px solid #ddd;
  padding: 0 .5em;
  border-radius: .25em;*/
  color: #666;
  font-size: 1em;
  font-weight: 700;
}

ul {
  list-style: none;
  text-align: left;
}

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />
  <div class="read-more-wrap">
    <a href="https://www.example.com/">Link1</a><br>
    <a href="https://www.example.com/">Link2</a><br>
    <a href="https://www.example.com/">Link3</a><br>
    <p class="read-more-target">
      <a href="https://www.example.com/">Link4</a><br>
      <a href="https://www.example.com/">Link5</a><br>
      <a href="https://www.example.com/">Link6</a><br>
    </p>
  </div>
  <label for="post-2" class="read-more-trigger"></label>
</div>