如何通过单击“获取另一个重复表单，而在当前表单的框中没有任何文本”；“下一步”；按钮，在javascript中？

这是我希望在单击“添加另一个模块”按钮时在页面中再次显示的表单详细信息

    <div>
    <form class="in-line" id="module_info"></form>
    <div style="display: flex;">
        <div align="left"> 
            <label >Module No: </label>
            <input type="text" class="form-control"  placeholder="Module no">
        </div>
        <div align="right" style="margin-left: 20%;">
            <label >Module title: </label>
            <input type="text" class="form-control"  placeholder="Module title">
        </div>
    </div><br> <br>
    <div>
        <label for="forInput">Objective : </label>
        <textarea class="form-control" placeholder="Objective" rows="5" cols="90">
        </textarea>
        <br><br>
        <label >Challenge: </label>
        <textarea type="text" class="form-control"  placeholder="challenge" rows="5" cols="90">
        </textarea><br><br>

        <label for="forInput">Show How  : </label>
        <textarea class="form-control" placeholder="Show how" rows="5" cols="89">
        </textarea>
        <br><br>
        <label >References : </label>
        <textarea type="text" class="form-control"  placeholder="References" rows="5" cols="88">
        </textarea><br><br>
    </div>
    <div id="extra" align="right"> 
     <button type="button" onclick="myFunc(this.form)">Add another Module</button>
    </div>
    </div>

</form>

模块号：
课程名称：



目标：



挑战：



演示如何：



参考资料：



添加另一个模块

---

请帮助我添加java脚本以获得所需的输出

您需要修复div和表单。我只需要使用jQuery的“clone（）”函数。我还要为模块添加一个div。下面是一个JSFIDLE：

实际上，您的表单id是一个问题-它需要增加。页面上不能有两个具有相同id的项目。我现在没时间了。如果你想要那个信息，请告诉我

无论如何，下面是脚本：

$('button.addModule').click(function () {
  addModule(this.form);
})
var addModule = function () {
  $('.modules')
    .append(
      $('.module').first().clone()
    )
}

这是您修改后的代码：

<div class="modules">
  <div class="module">
    <form class="in-line" id="module_info">
      <div style="display: flex;">
        <div align="left">
          <label>Module No: </label>
          <input type="text" class="form-control" placeholder="Module no">
        </div>
        <div align="right" style="margin-left: 20%;">
          <label>Module title: </label>
          <input type="text" class="form-control" placeholder="Module title">
        </div>
      </div>
      <br>
      <br>
      <div>
        <label for="forInput">Objective : </label>
        <textarea class="form-control" placeholder="Objective" rows="5" cols="90">
        </textarea>
        <br>
        <br>
        <label>Challenge: </label>
        <textarea type="text" class="form-control" placeholder="challenge" rows="5" cols="90">
        </textarea>
        <br>
        <br>

        <label for="forInput">Show How : </label>
        <textarea class="form-control" placeholder="Show how" rows="5" cols="89">
        </textarea>
        <br>
        <br>
        <label>References : </label>
        <textarea type="text" class="form-control" placeholder="References" rows="5" cols="88">
        </textarea>
        <br>
        <br>
      </div>
    </form>
  </div>
</div>
<div class="extra" align="right">
  <button type="button" class="addModule">Add another Module</button>
</div>

模块号：
课程名称：




目标：




挑战：




演示如何：




参考资料：




添加另一个模块

表单元素将在第二行中关闭。你确定这是正确的代码吗？你是说他的代码格式不好，@gurvinder372？@WilliamSchroederMcKinley是的，我看到一个表单在第二行关闭，一个在最后一行关闭，但表单只有一个起始标记。我知道@gurvinder372。我同意。我只是开个玩笑。GurvundRe362实际上，请不要考虑第二行，我错误地键入，实际上我需要代码来克隆表单。请提供javascript代码。哦，是的，你说得对，@Petroff。我正要去。决定保持简单。修理。。。。