Как различить одинаковые проверенные элементы в CSS и HTML

Question

В настоящее время у меня есть два набора одинаковых вкладок на веб-странице.Но когда я выбираю «Шоколад, хлеб или чипсы» на втором наборе вкладок, он выбирает первый набор и его вкладку.

Я знаю, что мне нужно различать два, но я не уверен, чтолучший процесс, чтобы сделать это.Вкладки будут создаваться с помощью цикла while в Wordpress, поэтому я могу назначить переменную с помощью 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>