单击onclick按钮时如何添加新表单或div

Question

我有一个表单，要求用户输入房间号和价格，看起来像下面的图片。

如果用户愿意，他们可以单击按钮以显示新表格，然后可以添加新的房间号和价格。 看起来像这样，但是我对它们进行了硬编码。

您如何制作JS函数来做到这一点？

我还想通过用户单击“提交”按钮将这些值设置到我的Firebase实时数据库中，但是如果用户单击“添加更多房间”按钮，新创建的表单是否会引用不同的表单ID？

更新：包括我的代码。

 <div>
    <form class="specify-numbers-price">
        <label for="ask-room-numbers-price">Please specify the room number and its price: </label>
        <br>
        <label for="room-numbers">Room numbers: </label>
        <input type="number" id="room-numbers" name="room-numbers" min="0" max="1000" >
        <label for="room-price">  Price (in $): </label>
        <input type="number" id="room-price" name="room-price" min="0">
        <br>
        <button type="submit" id="add-more-rooms" >Add more rooms</button>
    </form> 
</div>

Answer 1

该要求似乎是在每次单击其按钮时复制现有表单。

如果这是要求，则会向父div添加新表单：

const div = document.getElementById('form-wrapper');

function duplicateForm() {
  let forms = div.getElementsByClassName('specify-numbers-price');
  let firstForm = forms[0];
  let formClone = firstForm.cloneNode(true);
  div.appendChild(formClone);
}

<div id="form-wrapper">
  <form class="specify-numbers-price">
    <label for="ask-room-numbers-price">Please specify the
      room number and its price: </label>
    <br>
    <label for="room-numbers">Room numbers: </label>
    <input type="number" id="room-numbers" name="room-numbers"
      min="0" max="1000">
    <label for="room-price">  Price (in $): </label>
    <input type="number" id="room-price" name="room-price"
      min="0">
    <br>
    <button type="button" id="add-more-rooms"
      onclick="duplicateForm();">Add more rooms</button>
  </form>
</div>

Answer 2

这已经是之前讨论过的内容，只需使用内部html并通过id或class来获取div元素...我将向您展示一个简单的示例，您必须使用JavaScript进行操作。

/**
* A little example
*/
function addRow(newDivId) {
  let mydiv =  document.getElementById("divId"); //This is a global div that contains others dynamic divs.
  mydiv.innerHTML = `<div id='{newDivId}'>This is a new div with a diferent id</p>`;
}

function removeRow(idToRemove) {
  document.getElementById(idToRemove).remove();
}