title: Thymeleaf dynamic bootstrap modal from edit button with html table
body: <p>I have a table</p>
  
  <pre><code>&lt;table id="deleteTable" class="display table stripe"&gt;
      &lt;thead&gt;
      &lt;tr class="tr-class" style="color: white!important; background-color: #41424a!important"&gt;
          &lt;th&gt;Friendly Name&lt;/th&gt;
          &lt;th&gt;File Path&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr th:each="list: ${canDelete}"&gt;
              &lt;td th:text="${list.friendlyName}" style="padding-left: 1em"&gt;&lt;/td&gt;
              &lt;td th:text="${list.filePath}"&gt;&lt;/td&gt;
              &lt;td style="padding-left: 2em; width: 10em"&gt;
                  &lt;a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left: 1em"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;a style="padding-left: 3.2em; cursor: pointer;" data-target="#exampleModalCenter" data-toggle="modal"&gt;
                      &lt;i class="fa fa-plus"&gt;&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This tables uses thymeleaf <code>th:each</code> to iterate through a list of objects. I want to be able to click on my trashcan icon within each row of the table and delete the row. I'm trying to pass a property of the object into the modal just as a test.</p>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal fade" th:id="'modal-warning'+${list.filePath}" tabindex="-1" role="dialog"&gt;
  &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title"&gt;Remove Delete Permission&lt;/h5&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form action="#" th:action="@{/users/deletePermissions/approve}" th:object="${canDelete}"&gt;
                  &lt;div&gt;
                      &lt;div&gt;
                          &lt;span th:text="${list.filePath}"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div style="padding-top: 1em; float: right;"&gt;
                          &lt;button id="submitBtn" type="submit" class="mdc-button mdc-button--raised"&gt;
                              &lt;span class="mdc-button__label"&gt;add delete permission&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I believe the issues is within the table:</p>
  
  <pre><code>&lt;a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>or the modal:</p>
  
  <pre><code>th:id="'modal-warning'+${list.filePath}"
  </code></pre>
  
  <p>Update 1:</p>
  
  <p>Forgot to include the error i'm receiving..</p>
  
  <p>It's telling me that within my HTML page it cannot parse null for ${list.filePath} on line 84. Which is the line of code for the modal id.. it's like it's trying to parse that right now rather than on modal load</p>