如何克隆带单选按钮的HTML Div并修改其ID和Name属性

<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()">Add More Meal Options</button>
<div id="new-row"></div> <!-- Cloned content will be appended here -->

function addMealOptions() {
  // 1. 获取原始元素
  var original = document.getElementById("food-details");
  // 2. 深度克隆原始元素
  var clone = original.cloneNode(true);

  // 3. 生成一个唯一的索引。
  //    这里使用当前页面中所有具有 'food-details' 类名的元素数量作为索引。
  //    如果页面中有一个原始元素，则第一次克隆时 idx 为 1，第二次为 2，以此类推。
  var idx = document.querySelectorAll('.food-details').length;

  // 4. 更新克隆父容器的ID，确保其唯一性
  //    例如：从 "food-details" 变为 "food-details-1", "food-details-2"
  clone.setAttribute('id', original.id + '-' + idx);
  // 为了保持类名一致性，也可以考虑为克隆的元素添加一个额外的类名，
  // 或者如果ID是唯一的，则不修改类名。
  // clone.classList.add('cloned-food-details');

  // 5. 遍历克隆元素内部的所有单选按钮并修改其属性
  clone.querySelectorAll('input[type="radio"]').forEach(radio => {
    const originalRadioId = radio.id; // 获取原始单选按钮的ID
    const newRadioId = originalRadioId + '-' + idx; // 生成新的唯一ID，例如 "dot-1-1"

    // 更新单选按钮的ID
    radio.id = newRadioId;

    // 更新单选按钮的Name属性，使其形成一个新的独立组
    // 例如：从 "food" 变为 "food1", "food2"
    radio.name = radio.name + idx;

    // 清除单选按钮的选中状态，避免克隆时继承原始的选中状态
    radio.checked = false;

    // 找到与原始单选按钮ID关联的label元素，并更新其for属性
    // 注意：这里需要确保在 `clone` 内部查找 `label`，避免修改到原始 `label`
    const label = clone.querySelector(`label[for="${originalRadioId}"]`);
    if (label) {
      label.setAttribute('for', newRadioId);
    }

    // 如果原始单选按钮有onclick事件，克隆后也会保留。
    // 如果需要修改或移除，可以在这里处理：
    // radio.onclick = null; // 移除原始事件
    // radio.addEventListener('click', newClickHandler); // 添加新事件
  });

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