title: Thymeleaf list within list input
body: <p>I have a data structure like this :-</p>
  
  <pre><code>WorkHistory{
      List&lt;Jobs&gt; jobs;
  }
  Jobs{
     List&lt;String&gt; workDoneSentences;
  }
  </code></pre>
  
  <p>Basically, I am trying to collect all past jobs where a person has worked and the work that he hsa done there. So it is a list of list structure. I would like to know how can we handle this in UI for Thymeleaf/Spring mvc.</p>
  
  <p>I am trying to create UI as shown in the images. There is a table to enter data. To enter workDoneSentence i would like to open another modal. And the list of sentences should be bound to correct job index.
  <a href="https://i.stack.imgur.com/BebHG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BebHG.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ys4rJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ys4rJ.png" alt="enter image description here"></a></p>
  
  <p>Work Done opens the modal to take input the list of work done sentences.</p>
  
  <p>The html code that I have for this as follows :-</p>
  
  <pre><code>                                            &lt;tbody&gt;
                                              &lt;tr id='addr_work0' th:each="workRow, rowStat : *{workHistoryDetails.allWorkHistoryData}"&gt;
                                                  &lt;td th:text="${rowStat.index + 1}"&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="text" name='work_name0'
                                                      placeholder='Company Name'  class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].companyName}"/&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="text" name='work_city0'
                                                      placeholder='Company city' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].city}"/&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="text" name='work_title0'
                                                      placeholder='Job Title' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].jobTitle}"/&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;input name="is_current0" type="checkbox"
                                                      value="" class="form-control" style="text-align: center;" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].currentJob}"&gt;
                                                  &lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="text" name='work_start0'
                                                      placeholder='Start Date' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].startDate}"/&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="text" name='work_end0'
                                                      placeholder='End Date' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].endDate}"/&gt;&lt;/td&gt;
                                                  &lt;td&gt;&lt;a class="btn btn-primary btn-md" id="work_done0"
                                                      name="work_done0"&gt;Work done&lt;/a&gt;&lt;/td&gt;
  
  
                                              &lt;/tr&gt;
                                              &lt;tr id='addr_work1'&gt;&lt;/tr&gt;
                                          &lt;/tbody&gt;
  </code></pre>
  
  <p>I am not sure how I can link the workDone input. Please suggest.
  Thanks!</p>