JSFiddle - React, Tailwind, and code Playground

HTML

<table width="700" border="0" cellspacing="0" cellpadding="5" class="table" style="float:">
    <tr>
<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>


<script language="javascript">
fields = 0;

function addmyrow() {
    if (fields != 10) {
        var newIngredients = document.createElement('input');
        var newQuantity = document.createElement('input');
        var brTag = document.createElement('br');
        
        newIngredients.setAttribute('type', 'text');
        newQuantity.setAttribute('type', 'text');
        newIngredients.setAttribute('placeholder', 'Ingredient');
        newQuantity.setAttribute('placeholder', 'Quantity');
        newIngredients.setAttribute('name', 'ingredients[]');
        newQuantity.setAttribute('name', 'quantity[]');
        
        newIngredients.setAttribute('class', 'tr');
        newQuantity.setAttribute('class', 'tr');
        
        document.getElementById('row').appendChild(newIngredients); 
        document.getElementById('row').appendChild(brTag); 
        document.getElementById('row').appendChild(newQuantity);
        document.getElementById('row').appendChild(brTag); 
    
        fields += 1;
    } else {
        document.getElementById('row').innerHTML += "<br />Only 10 upload fields allowed.";
        document.form.add.disabled=true;
    }
}
</script>