title: Create dynamic List Object in thymeleaf by Adding rows to Table
body: <p>Here is my Code Sample with Controller.</p>
  
  <p>Controller class</p>
  
  <pre><code>import java.util.ArrayList;
  
  import org.CodeDaemons.dao.Document;
  import org.CodeDaemons.dao.Documents;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.GetMapping;
  import org.springframework.web.bind.annotation.ModelAttribute;
  import org.springframework.web.bind.annotation.PostMapping;
  
  @Controller
  public class Control {
  
      @GetMapping("/")
      public String getPage(Model model) {
          Documents  docs = new Documents();
          docs.setDocument(new ArrayList&lt;Document&gt;());
          docs.setId(12);
          model.addAttribute("documents",new Documents());
          return "document";
      }
  
      @PostMapping("/save")
      public String save(@ModelAttribute("documents") Documents docs) {
          if(docs.equals(null))
          {
              System.out.println("Bye");
          }
          else {
              System.out.println("Error");
              System.out.println(docs.getId());
              System.out.println(docs.getDocument().size());
          }
          return "save";
      }
  
  }
  </code></pre>
  
  <p>Documents class which is my Model Attribute</p>
  
  <pre><code>import java.util.List;
  
  public class Documents {
  
      private int id;
      private List&lt;Document&gt; document;
  
      public int getId() {
          return id;
      }
      public void setId(int id) {
          this.id = id;
      }
      public List&lt;Document&gt; getDocument() {
          return document;
      }
      public void setDocument(List&lt;Document&gt; document) {
          this.document = document;
      }
  }
  </code></pre>
  
  <p>&amp; Document class</p>
  
  <pre><code>public class Document {
  
      private String name;
      private String printout;
      private String orignal;
      private String photocopy;
      public String getName() {
          return name;
      }
      public void setName(String name) {
          this.name = name;
      }
      public String getPrintout() {
          return printout;
      }
      public void setPrintout(String printout) {
          this.printout = printout;
      }
      public String getOrignal() {
          return orignal;
      }
      public void setOrignal(String orignal) {
          this.orignal = orignal;
      }
      public String getPhotocopy() {
          return photocopy;
      }
      public void setPhotocopy(String photocopy) {
          this.photocopy = photocopy;
      }
  }
  </code></pre>
  
  <p>Html Template</p>
  
  <pre><code>&lt;HTML  xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;HEAD&gt;
      &lt;TITLE&gt; Document Submission &lt;/TITLE&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
  $(document).ready(function(){
  
  var counter = 1;
      $("#addnew").click(function(event){
      event.preventDefault();
      counter++;
      var newRow = jQuery('&lt;tr&gt;&lt;td&gt;&lt;select name="doc.name"&gt;&lt;option  value="10" name="10"&gt;10th Mark-sheet&lt;/option&gt;&lt;option value="" name="12"&gt;12th Mark-sheet&lt;/option&gt;'+
  '&lt;option value="MSA" name="MSA"&gt;UG Mark-sheet(All Semesters)&lt;/option&gt;'+
  '&lt;option value="UGM" name="UGM"&gt;UG Consolidated Mark-sheet&lt;/option&gt;'+
  '&lt;option value="UGD" name="UGD"&gt;UG Degree/Provisional Degree&lt;/option&gt;'+
  '&lt;option value="MC" name="MC"&gt;Migration Certificate&lt;/option&gt;'+
  '&lt;option value="TC" name="TC"&gt;Transfer Certificate&lt;/option&gt;'+
  '&lt;/select&gt;&lt;/td&gt;'+
  '&lt;td&gt;&lt;select name="doc.original"&gt;&lt;option value="yes"&gt;Yes&lt;/option&gt;&lt;option value="due"&gt;Due&lt;/option&gt;&lt;option value="NA"&gt;N/A&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;'+
  '&lt;select name="doc.photocopy"&gt;&lt;option value="yes"&gt;Yes&lt;/option&gt;&lt;option value="due"&gt;Due&lt;/option&gt;&lt;option value="na"&gt;N/A&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;'+
  '&lt;select name="doc.printout"&gt;&lt;option value="yes"&gt;Yes&lt;/option&gt;&lt;option value="due"&gt;Due&lt;/option&gt;&lt;option value="na"&gt;N/A&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="date"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="date"&gt;&lt;/td&gt;&lt;/tr&gt;');
      jQuery('table.table-hover').append(newRow);
  });
  });
  
  
  &lt;/script&gt;
  
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  
      &lt;center&gt;&lt;h1&gt;Document Submission Record&lt;/h1&gt;&lt;/center&gt;
      &lt;br/&gt;
  
  
  
      &lt;!-- College Id No.&lt;/td&gt;&lt;td&gt; &lt;input type="text" class="form-group"&gt;&amp;nbsp;
      Ref. Id&lt;/td&gt;&lt;td&gt; &lt;input type="text" class="form-group"&gt;&amp;nbsp;
      Name&lt;/td&gt; &lt;input type="text" class="form-group"&gt;
      &lt;br/&gt;&lt;br/&gt;
       --&gt;
  
      &lt;form th:action="@{/save}" method="post" th:object="${documents}"&gt;
  
      &lt;center&gt;&lt;h3&gt;&lt;strong&gt;Documents&lt;/strong&gt;&lt;/h3&gt;&lt;/center&gt;&lt;br/&gt;
  
  
  
      &lt;TABLE class="table table-hover" &gt;
  
          &lt;tr&gt;
              &lt;th &gt;Document Name&lt;/th&gt;
              &lt;th colspan="3"&gt;Document Type&lt;/th&gt;
              &lt;th&gt;Received Date&lt;/th&gt;
              &lt;th&gt;Due Date&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;Original&lt;/td&gt;
                  &lt;td&gt;Photocopy&lt;/td&gt;
                  &lt;td&gt;Printout&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  
  
          &lt;tr th:each="doc :${documents.document}" th:field="*{document}"&gt;
  
                  &lt;td&gt;
                  &lt;select name="doc.name"&gt;
                      &lt;option value="10"&gt;10th Mark-sheet&lt;/option&gt;
                      &lt;option value="12"&gt;12th Mark-sheet&lt;/option&gt;
                      &lt;option value="MSA"&gt;UG Mark-sheet (All Semesters)&lt;/option&gt;
                      &lt;option value="UGM"&gt;UG Consolidated Mark-sheet&lt;/option&gt;
                      &lt;option value="UGD"&gt;UG Degree/Provisional Degree&lt;/option&gt;
                      &lt;option value="MC"&gt;Migration Certificate&lt;/option&gt;
                      &lt;option value="TC"&gt;Transfer Certificate&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;select name="doc.original" th:field="*{document.orignal}"&gt;
                      &lt;option value="yes"&gt;Yes&lt;/option&gt;
                      &lt;option value="due"&gt;Due&lt;/option&gt;
                      &lt;option value="NA"&gt;N/A&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
  
  
                  &lt;select name="doc.photocopy" th:field="*{document.photocopy}"&gt;
                      &lt;option value="yes"&gt;Yes&lt;/option&gt;
                      &lt;option value="due"&gt;Due&lt;/option&gt;
                      &lt;option value="NA"&gt;N/A&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
  
  
                  &lt;select name="doc.printout"  th:field="*{document.printout}"&gt;
                      &lt;option value="yes"&gt;Yes&lt;/option&gt;
                      &lt;option value="due"&gt;Due&lt;/option&gt;
                      &lt;option value="NA"&gt;N/A&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                  &lt;input type="date"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                  &lt;input type="date"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;/TABLE&gt;
  
  &lt;button type="button" class="btn btn-primary" id="addnew"&gt;Add Row&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &lt;/form&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>on Clicking Add Row button I want to add a new Row which is working with my JQuery but
  I want the dynamic object list binding on posting
  the page &amp; server would respond like
  new Object of "Documents" class will be created. and the field it contains Document will have the list of documents with name, original photocopy &amp; printout data. which adds in Document list object with the index is increment. and on finally clicking on save button the page will bind the Document object list to Documents and then send Documents to object to the controller which I can unwrap</p>