Html 单个页面上有多个列表组，但每个列表组允许唯一的选择

我想在我的页面上有三个单列列表组，允许用户从每个组中选择一个项目。然而，列表组都是链接的，我还没有弄清楚如何将它们作为单独的列表组保存

我设置了一个快捷键，以便您可以看到我正在尝试做什么

我也不知道为什么列表的每一列都会被前一列抵消

以下是我在尝试解决此问题时使用的HTML：

<div class="container">
    <h3>
        Select one from each column.
    </h3>

    <div>
      <h3 class="list-group-item-heading">Select Opp</h3>
    </div>
    <div id="oppname" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Aelia
            </a>
      </div>
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Del Monte
            </a>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Id</h3>
    </div>
    <div id="oppid" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Id: 1724
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Id: 1675
            </a>
        </div>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Size</h3>
    </div>
    <div id="oppsize" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Size: 24
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Size: 75
            </a>
        </div>
      </div>
    </div>

</div>

从每列中选择一个。
选择Opp
选择Id
选择大小

---

谢谢你的帮助

是的，它在默认分组中不起作用，这很奇怪

这里有一个解决方案

---

还有中提琴。

是的，它在默认分组中不起作用，这很奇怪

这里有一个解决方案

---

还有中提琴。

谢谢！这正是我需要的。谢谢！这正是我所需要的。

<div class="list-group">
  <a href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>
<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

$('body').on('click', '.list-group a', function (e) {
   $(this).addClass('active');
   $(this).siblings().removeClass('active');
});