JSFiddle - React, Tailwind, and code Playground

HTML

<table width="700" border="0" cellspacing="0" cellpadding="5" class="table" style="float:">
<td width="180">Ingrédients</td>
    <td>
    <input type="text"class="tr" name="ingredients[]" id="ingredients" placeholder="Ingredient"/>
    </td>    
  </tr>
  <tr>
    <td>Quantité</td>
    <td><input name="quantity[]" type="text" id="quantity" placeholder="Quantity"   class="tr"  /></td>   
  </tr>  
  <tr>
    <td></td>
      <td><input type="button" onclick="addmyrow()" name="add" value="Ajouter un autre ingrédient" /><br/><br/>  <div id="row"></div></td>
  </tr> 
</table>

JavaScript

var fields = 0;
function addmyrow() {
if (fields != 10) {
    console.log(document.getElementById('row').innerHTML);
    $("#row").append("<input type='text' class='tr' name='ingredients[]' id='ingredients' placeholder='Ingredient' value='' /><br/>");
    
    $("#row").append("<input name='quantity[]' type='text' id='quantity' placeholder='Quantity'   class='tr'  /><br/>");
fields += 1;
} else {
$("#row").append("<br />Only 10 upload fields allowed.");
document.form.add.disabled=true;
}
}