Javascript 添加动态输入-未正确追加-包含图片

我已经包含了用于动态添加输入字段的javascript，但是第一次单击时它的样式不正确。下面是使用add按钮之前的外观（忽略出现2x的Author 1/University 1，其在我的代码中仅供参考）：

单击几次后，它的外观如下：

如您所见，第一个添加项的样式不正确

我还想知道是否有人知道我如何创建“删除作者字段”按钮，以便在不需要时减去输入字段

这是我的密码：

输入表单-研究Ranker
$（函数（）{
var-num=2；
变量id='author'+num；
var uni_id=‘大学’+num；
$（“#AuthorFieldButton”）。单击（函数（）{
变量名称='Author'+num；
var uni_name=‘大学’+num；
id='作者'+num；
$（'.author group'）。追加（''+name+'：'+uni_name+'：从以下位置更新您的js：

$('.author-group').append('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')

$（'.author group'）。追加（'+name+'：'+uni_name+'：'））

若要修复样式问题，请参阅下面的“删除上一个作者”按钮的代码段



输入表单-研究Ranker
$（函数（）{
var-num=2；
变量id='author'+num；
var uni_id=‘大学’+num；
$（“#AuthorFieldButton”）。单击（函数（）{
变量名称='Author'+num；
var uni_name=‘大学’+num；
id='作者'+num；
$（'.author group'）.last（）。在（''+name+''：''+uni_name+''之后：非常感谢！完成了任务！
$('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')