如何在CSS和HTML中区分相同的选中元素

Question

我目前在一个网页上有两组相同的标签。但是，当我在第二组选项卡上选择“巧克力，面包或薯条”时，它将选择第一组及其选项卡。

我知道我需要区分两者，但是我不确定这样做的最佳过程是什么。这些选项卡将使用Wordpress中的while循环创建，因此如果我需要添加ID或类似于每组选项卡的内容，则可以使用PHP分配变量。预先感谢

密码笔：https://codepen.io/adamrconnah/pen/XGVNBo

HTML / CSS：

.moretabs {
  display: flex;
  flex-wrap: wrap;
  /*max-width: 700px;*/
  background: #e5e5e5;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
    padding:5px;
  margin-bottom:30px;
}
.moreinput {
  position: absolute;
  opacity: 0;
}
.morelabel {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}
.morelabel:hover {
  background: #d8d8d8;
}
.morelabel:active {
  background: #ccc;
}
.moreinput:focus + .morelabel {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}
.moreinput:checked + .morelabel {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .morelabel {
    width: auto;
  }
}
.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}
@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}
.moreinput:checked + .morelabel + .panel {
  display: block;
}

<div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Banana</label>
   <div class="panel">
      <h1>Banana</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Orange</label>
   <div class="panel">
      <h1>Orange</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Apple</label>
   <div class="panel">
      <h1>Apple</h1>
      <p>Some text.</p>
   </div>
</div>
<div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Chocolate</label>
   <div class="panel">
      <h1>Chocolate</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Bread</label>
   <div class="panel">
      <h1>Bread</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Chips</label>
   <div class="panel">
      <h1>Chips</h1>
      <p>Some text.</p>
   </div>
</div>