Clone a form with a click of a button

Question

i have this form and button in my html page:

All i want is to when i click this button a new (but same) empty form to appear next to the one that already exists.

I tried this:

let clone = $("#nfa-transitions .production-row").last().clone(true);

but the new form that appears is not empty, it has the previous data!

Does anyone know how can i do it?

Answer 1

Is this what you are looking for?

$("#add").click(function(){
  var clone = $("#nfa-transitions .production-row").last().clone(true);
  clone.val("");
  clone.find("input").each(function() {
      $(this).val("");
  });
  clone.appendTo($("#production-rows"));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="nfa-transitions">
  <div id="production-rows">
    <div class="production-row">
    ( <input type="number" >, <input type="number" > ) = <input type="number" >
    </div>
  </div>
  <input type="button" id="add" value="Click here to add a new transition">
</form>