title: Grails: Add items to list and attach it to its parent object
body: <p>I have a Recipe, Ingredient and RecipeIngredient domains as below:</p>
  
  <pre><code>class Ingredient {
      String title
  }
  
  class Recipe {
  
      String title
      String description
  
      static hasMany = [ingredients: RecipeIngredient]
  }
  
  class RecipeIngredient {
  
      Ingredient ingredient
  
      static belongsTo = [recipe: Recipe]
  
      Measure measure
      Double amount
  }
  </code></pre>
  
  <p>In my recipe/Create.gsp page when I want to create a new recipe, I want to add its ingredients one by one and addto recipe instance and save them all together.</p>
  
  <pre><code>&lt;g:form controller="recipe" action="save" method="POST"&gt;
      **/* HERE I WANT TO BE ABLE TO ADD ALL INGREDIENTS ONE BY ONE */
      &lt;select value="${recipe_ingredient.ingredient}"&gt;
          &lt;g:each in="${allIngredients}" status="i" var="ingredient"&gt;
              &lt;option&gt;${ingredient.title}&lt;/option&gt;
          &lt;/g:each&gt;
      &lt;/select&gt;
      &lt;select name="recipe_ingredient.measure" value="${recipe_ingredient.measure}"&gt;
          &lt;g:each in="${enums.Measure.values()}" var="m"&gt;
              &lt;option&gt;${m}&lt;/option&gt;
          &lt;/g:each&gt;
      &lt;/select&gt;
      &lt;input name="recipe_ingredient.amount" placeholder="Measure" value="${recipe_ingredient.amount}" /&gt;
      &lt;g:actionSubmit value="Add" action="addIngredient" /&gt;
      /* END */**
  
      &lt;div class="row"&gt;
          &lt;input name="title" value="${instance?.title}" placeholder="Title" /&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;input name="titleEng" value="${instance?.description}" placeholder="Description" /&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;g:submitButton name="Create" /&gt;
      &lt;/div&gt;
  &lt;/g:form&gt;
  
  </code></pre>
  
  <p>How can I achieve such thing?</p>