如何实现点击按钮后复制字段显示在原字段右侧？

要实现点击按钮后复制的字段与原字段并排显示在右侧、样式完全一致，需要从布局结构、样式控制和克隆逻辑三个方面调整，具体修改如下：

1. 调整HTML结构 #

将原输入组和复制区域放到弹性布局的父容器中，搭建横向排列的基础结构：

<div class="input-groups-container">
  <div id="inputs" class="short input-group">
    <input id="input1" class="input" placeholder=" Add label..." type="text">
    <hr class="hr1">
    <input id="input2" class="placeholder" placeholder=" Add placeholder..." type="text">
    <button class="btn btn-delete" onclick="deleteGroup(this)">
      <i class="fas fa-trash-alt"></i>
    </button>
    <button onclick="duplicate()" class="button1">
      <img src="https://img.icons8.com/android/24/null/plus.png"/>
    </button>
  </div>
  <div id="duplicatedInputs"></div>
</div>

2. 添加CSS样式 #

通过弹性布局实现横向排列，同时保证每个输入组的样式统一：

/* 父容器：弹性布局，支持换行 */
.input-groups-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  padding: 10px;
}

/* 每个输入组的基础样式，控制宽度实现并排 */
.input-group {
  width: 48%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 统一输入框样式 */
.input-group input {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px;
  box-sizing: border-box;
}

.input-group .hr1 {
  margin: 8px 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* 按钮样式统一 */
.input-group button {
  margin-right: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

3. 修改JavaScript逻辑 #

改为克隆整个输入组容器，确保复制后的结构、样式与原组完全一致，同时处理唯一ID和删除功能：

var counter = 1;

function duplicate() {
  // 克隆完整的输入组，而非单个输入框
  var originalGroup = document.getElementById("inputs");
  var clonedGroup = originalGroup.cloneNode(true);
  
  // 给克隆组设置唯一ID
  clonedGroup.id = "input-group-" + counter;
  
  // 修改组内输入框的唯一ID，避免冲突
  var clonedInput1 = clonedGroup.querySelector(".input");
  var clonedInput2 = clonedGroup.querySelector(".placeholder");
  clonedInput1.id = "input1-" + counter;
  clonedInput2.id = "input2-" + counter;
  
  // 隐藏克隆组的新增按钮，避免嵌套新增
  var addBtn = clonedGroup.querySelector(".button1");
  addBtn.style.display = "none";
  
  // 将克隆组追加到复制区域
  document.getElementById("duplicatedInputs").appendChild(clonedGroup);
  
  counter++;
}

// 新增删除组的功能
function deleteGroup(btn) {
  var group = btn.closest(".input-group");
  // 禁止删除原始输入组（可根据需求调整）
  if (group.id !== "inputs") {
    group.remove();
  }
}

关键修改说明 #

• Flex布局：通过input-groups-container的display: flex实现横向排列，flex-wrap: wrap保证超出宽度后自动换行
• 克隆完整组：避免单独克隆输入框导致结构缺失，确保样式和交互逻辑与原组一致
• 唯一ID处理：给克隆元素设置唯一ID，避免DOM元素ID冲突
• 删除功能优化：新增删除按钮逻辑，同时限制原始组不能被删除（可按需调整）

内容的提问来源于stack exchange，提问作者Donko Tonev