Динамическая таблица

<form method="post" action="#">
  <table width="100%">
    <tr>
      <td>
        <input class="dish" type="text" name="dish" placeholder="Наименование блюда" />
        <button id="add-ingredient" type="button">Добавить ингредиент</button>
      </td>
    </tr>
    <tr class="ingredient">
      <td>
        <input class="list_dish" type="text" name="list_dish[]" placeholder="Cостав блюда" />
        <input class="percent" type="text" name="percent[]" placeholder="%" />
        <input class="gram" type="text" name="gram[]" placeholder="гр." disabled />
        <button class="remove-ingredient" type="button">&times;</button>
      </td>
    </tr>
  </table>
</form>
<script>
  (function() {
    document.querySelector('#add-ingredient').addEventListener('click', function() {
      var table = this.closest('table');
      var clone = table.querySelector('.ingredient').cloneNode(true);
      clone.querySelector('.list_dish').value = '';
      clone.querySelector('.percent').value = '';
      table.appendChild(clone);
    });
 
    document.querySelector('table').addEventListener('click', function(e) {
      if (!e.target.classList.contains('remove-ingredient')) return;
 
      e.target.closest('.ingredient').remove();
    });
  })();
 
</script>