title: How to bind a dynamic child list using Thymeleaf and JQuery?
body: <p>I am a complete newbie and I really hope you can help me!</p>
  <p>I have two entities: Recipe and Product. The recipe object contains a list of products, the size of
  which is &quot;controlled&quot; by the user - it changes based on how many products the user would like to
  include.</p>
  <p>This is my <strong>Recipe Entity</strong>:</p>
  <pre><code>@Entity
  @Table(name = &quot;recipes&quot;)
  public class RecipeEntity extends BaseEntity {
  
      private String name;
      private String shortDescription;
      private String cookingInstructions;
      private Integer cookingTime;
      private Integer portions;
      private List&lt;ProductEntity&gt; products;
      
      //GETTERS, SETTERS
  </code></pre>
  <p>And this is the <strong>Product Entity</strong>:</p>
  <pre><code>@Entity
  @Table(name = &quot;products&quot;)
  public class ProductEntity extends BaseEntity {
  
      private String name;
      private Double quantity;
      private RecipeEntity recipe;
      
      //GETTERS, SETTERS
  </code></pre>
  <p>This is the <strong>Thymeleaf</strong> template:</p>
  <pre><code> &lt;h4&gt;Products&lt;/h4&gt;
  
   &lt;div class=&quot;products&quot; th:each=&quot;product, iterStat : *{products}&quot;&gt;
     &lt;div class=&quot;product row&quot;&gt;
  
  
       &lt;div class=&quot;col-lg-6 mb-3&quot;&gt;
         Name
         &lt;input th:field=&quot;*{products[__${iterStat.index}__].name}&quot; id=&quot;product&quot; class=&quot;form-control form-control-lg&quot; /&gt;
       &lt;/div&gt;
  
       &lt;div class=&quot;col-lg-6 mb-3&quot;&gt;
         Quantity(grams)
         &lt;input th:field=&quot;*{products[__${iterStat.index}__].quantity}&quot; type=&quot;number&quot; id=&quot;quantity&quot; step=&quot;0.1&quot; min=&quot;0&quot; class=&quot;form-control form-control-lg&quot; /&gt;
       &lt;/div&gt;
  
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;button type=&quot;button&quot; class=&quot;add-product btn btn-outline-secondary col-lg-12&quot;&gt;+ Add another
     product
   &lt;/button&gt;
  </code></pre>
  <p>And finally we have the <strong>JQuery</strong> function I wrote to add rows of products dynamically:</p>
  <pre><code>$(document).ready(function () {
      $('.add-product').click(function () {
          let newRow = jQuery('&lt;div class=&quot;product row&quot;&gt;' +
              ' &lt;div class=&quot;col-lg-6 mb-3&quot;&gt;' +
              ' Name' +
              ' &lt;input type=&quot;text&quot; class=&quot;form-control form-control-lg&quot;/&gt;' +
              ' &lt;/div&gt;' +
              ' &lt;div class=&quot;col-lg-6 mb-3&quot;&gt;' +
              '  Quantity(grams)' +
              ' &lt;input type=&quot;number&quot; step=&quot;0.1&quot; min=&quot;0&quot;' +
              ' class=&quot;form-control form-control-lg&quot;/&gt;' +
              '&lt;/div&gt;' +
              '&lt;/div&gt;');
  
          $('.products').append(newRow)
  </code></pre>
  <p>Now the problem is I want to get all of the products along with the recipe on a post request and
  save them to the DB together. The JQuery function works fine, it does append product rows,
  however when i post the information to my RecipeController, the list of products is empty.</p>
  <p>I would be really thankful if someone could show me the right direction, as I'm feeling completely lost on this one! Thank you all in advance!</p>