我来帮你理清问题所在，然后给出直接可行的解决方案！

你的核心需求是给动态生成的输入框添加由uid()生成的ID，但当前代码的问题有两个：

• 两次调用.after()会把内容拆分插入，导致HTML结构混乱（input和Remove按钮不在同一个div里）
• 根本没把生成的id值绑定到输入框的id属性上

正确的实现方式 #

你需要先把完整的HTML结构拼接好，把生成的ID插入到input的id属性中，再一次性插入到DOM里。推荐用ES6模板字符串来拼接，可读性更强：

var id = uid();
// 用模板字符串把ID嵌入到input的id属性里，同时把input和按钮放在同一个div中
$(wrapper).after(`<div>
  <input class="form-control" type="text" id="${id}" name="mytext[]"/>
  <a href="#" class="remove_field">Remove</a>
</div>`);

如果你的项目环境还不支持ES6模板字符串，也可以用传统的字符串拼接方式：

var id = uid();
$(wrapper).after('<div> <input class="form-control" type="text" id="' + id + '" name="mytext[]"/> <a href="#" class="remove_field">Remove</a></div>');

为什么原来的写法不生效？ #

原来的代码里，第一次.after()插入了只包含input的div，第二次.after()又在wrapper后面插入了只包含Remove按钮的div，这会导致两个div是同级关系，而且完全没给input添加ID属性，自然达不到你的需求。

现在这样写，既保证了input和按钮在同一个容器里，又成功把uid()生成的ID绑定到了输入框上，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Nathiel Paulino