克隆包含单选按钮的HTML元素并确保其功能独立性

<div class="food-details" id="food-details">
  <input type="radio" name="food" id="dot-1" onclick="additionalGuestCheck()">
  <input type="radio" name="food" id="dot-2" onclick="additionalGuestCheck()">
  <input type="radio" name="food" id="dot-3" onclick="additionalGuestCheck()">

  <span class="food-title">Meal choice*</span>

  <div class="category">
    <label for="dot-1">
      <span class="dot one"></span>
      <span class="food"><i class="fa-solid fa-cow"></i></span>
    </label>

    <label for="dot-2">
      <span class="dot two"></span>
      <span class="food"><i class="fa-solid fa-fish"></i></span>
    </label>

    <label for="dot-3">
      <span class="dot three"></span>
      <span class="food"><i class="fa-solid fa-carrot"></i></span>
    </label>
  </div>
</div>

<button onclick="addMealOptions()">添加餐食选项</button>
<div id="new-row"></div> <!-- 克隆的元素将添加到这里 -->

function addMealOptions() {
  // 1. 获取原始元素
  var original = document.getElementById("food-details");

  // 2. 克隆原始元素
  var clone = original.cloneNode(true);

  // 3. 生成一个唯一标识符
  // 我们可以通过计算当前页面上已有的同类元素数量来生成索引
  // 或者使用时间戳、UUID等更复杂的唯一生成方式
  var currentInstances = document.querySelectorAll('.food-details').length;
  var uniqueIndex = currentInstances + 1; // 从1开始计数，确保唯一性

  // 4. 为克隆的父元素设置新的ID（可选，但推荐）
  clone.setAttribute('id', 'cloned-food-details-' + uniqueIndex);

  // 5. 遍历克隆元素中的所有单选按钮和对应的label，并更新它们的属性
  clone.querySelectorAll('input[type="radio"]').forEach((radio, index) => {
    // 获取原始的ID和Name
    const originalId = radio.getAttribute('id');
    const originalName = radio.getAttribute('name');

    // 生成新的唯一ID和Name
    const newId = `${originalId}-${uniqueIndex}`;
    const newName = `${originalName}-${uniqueIndex}`;

    // 更新单选按钮的ID和Name
    radio.setAttribute('id', newId);
    radio.setAttribute('name', newName);
    // 确保克隆的单选按钮初始状态为未选中
    radio.checked = false; 

    // 找到与当前单选按钮关联的label元素
    // 这里假设label与radio按钮在DOM结构上是相邻的或者可以通过某种模式找到
    // 根据提供的HTML，label是通过for属性关联的，我们需要找到for属性匹配的label
    const label = clone.querySelector(`label[for="${originalId}"]`);
    if (label) {
      label.setAttribute('for', newId);
    }
  });

  // 6. 将修改后的克隆元素添加到DOM中
  document.getElementById("new-row").appendChild(clone);
}