Javascript Jquery按钮don'；t在控制台追加没有错误的元素

我有这个html表单：

         <div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="patient_weight">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="patient_weight" id="patient_weight">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

它可以工作，但存在两个问题：

每个元素的ID不递增

如果我有2个元素并点击按钮，它们将是4，然后是8，然后

编辑2

我试过了，问题2消失了：

$("button.clone").on("click", function()
{
  $('#clonedInput1').clone().insertAfter('#clonedInput1')
});

---

现在我仍然需要增加id，以便稍后使用Ajax发送数据

检查下面的代码是否有效

$（文档）.ready（函数（）
{
$（“button.clone”）。单击（“单击”，克隆）；
$（“button.remove”）。单击（“单击”，删除）；
})
var regex=/^（+.+？）（\d+）$/i；
变量克隆索引=$（“.clonedInput”）.length；
函数克隆（）{
$（this）.clone（“.rounded”）.clone（）
.insertAfter（“.四舍五入：最后一个”）
.attr（“id”，“四舍五入”+（克隆索引+1））
.find（“*”）
.each（函数（{
var id=this.id | |“”；
var match=id.match（正则表达式）| |[]；
如果（match.length==3）{
this.id=匹配[1]+（克隆索引+1）；
}
})
.on（'click'、'button.clone'，clone）
.on（'click'，'button.remove'，'remove'）；
克隆索引++；
}
函数删除（）{
$（this.parent（）.parent（“.rounded”）.remove（）；
}

药物
选择
量
添加更多
去除

如果您愿意将id连字符：

var regex=/^（+？）（\d+）$/i；
变异克隆指数=1；
函数克隆（）{
克隆索引++；
$（this.parents（“.clonedInput”）.clone（）
.附件（“正文”）
.attr（“id”，“克隆输入-”+（克隆索引））
.find（“*”）
.each（函数（{
var id=this.id | |“”；
var match=id.match（正则表达式）| |[]；
如果（match.length==3）{
this.id=id.split（'-'）[0]+'-'+（克隆索引）；
}
})
.on（'click'、'button.clone'，clone）
.on（'click'，'button.remove'，'remove'）；
}
函数删除（）{
$（this.parents（“.clonedInput”）.remove（）；
}
$（“button.clone”）。单击（“单击”，克隆）；
$（“button.remove”）。单击（“单击”，删除）

学习范畴*
请选择
子类别*
请选择类别
子类别*
请选择子类别
克隆
去除
您缺少父级
div
。当您在
clone（）
中执行操作时：
$（this）.parents（“.clonedInput”）.clone（）

但是在html中，
不是
添加更多的父项

这是更新后的fiddle-
首先，您使用了#clone，其中您为add class指定了class作为clone。其次，clone已经是一个预定义的函数，您正在将其用作类？有很多未使用的类。@HemaNandagopal请参见我的编辑。我不知道为什么有人否决了我刚才看到你的编辑。我想你的小提琴需要更新吗？它不起作用。有时人们会投反对票。它发生了，别担心。请在30秒后查看我的编辑，然后我将重新更新fiddlesee EDIT2 Please和更新的fiddleIt每次添加2个div问题是只添加文本框而不是所有div元素，然后我可以使用Ajax通过数组将所有数据发送到PHP？是的，只要这些都在一个带有提交按钮的表单中，将数据传递到phpB时应该没有问题，但每次添加2个div似乎不适合我，您是否通过按“运行代码片段”在StackOverflow上对其进行了测试？问题是只添加文本框而不是所有div元素。问题是只添加文本框而不是所有div元素
$("button.clone").on("click", function()
{
   $('.clonedInput').clone().insertAfter('.clonedInput')
});

$("button.clone").on("click", function()
{
  $('#clonedInput1').clone().insertAfter('#clonedInput1')
});