JSFiddle - React, Tailwind, and code Playground

by mdrezu

HTML

<form action="form_sent.php" method="post">
  <ul id="fieldList">
    <li>
      <input name="name[]" type="text" placeholder="Name" />
    </li>
    <li>
      <input name="phone[]" type="text" placeholder="Phone" />
    </li>
    <li>
      <input name="email[]" type="text" placeholder="E-Mail">
    </li>
  </ul>
  <button id="addMore">Add more fields</button>
  <br>
  <br>
  <input type="submit">
</form>

CSS

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

JavaScript

$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<li>&nbsp;</li>");
    $("#fieldList").append("<li><input type='text' name='name[]' placeholder='Name' /></li>");
    $("#fieldList").append("<li><input type='text' name='phone[]' placeholder='Phone' /></li>");
    $("#fieldList").append("<li><input type='text' name='email[]' placeholder='E-Mail' /></li>");
  });
});