title: JS HTML: Get particular column value after button click
body: <p>I have a table with several columns. Each row has an edit button.</p>
  
  <p><a href="https://i.stack.imgur.com/3S5VP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3S5VP.png" alt="enter image description here"></a></p>
  
  <p>If the user clicks on it, a modal view opens. The user can enter some values and send these via AJAX to my controller.</p>
  
  <p><a href="https://i.stack.imgur.com/P9Q67.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P9Q67.png" alt="enter image description here"></a></p>
  
  <p>My problem is that I have no idea how to transfer to my JS function which particular edit button the user has actually clicked in the table.</p>
  
  <p><em>In the past I had an edit button in each row:</em></p>
  
  <pre><code>  &lt;td&gt;&lt;a th:href="'/edit/' + *{person.getName()}" class="btn-sm btn-success"
                             role="button"&gt;Edit&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>But this led me to a new HTML view where the user could edit. With my new UI I want really only to go with the modal.</p>
  
  <p>But since JS/AJAX has no idea about the whole table it seems to me like a totally wrong approach to me. Moreover I am pretty new to JS/AJAX</p>
  
  <p>Currently I call the JS function like this:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary"
                          id="subscribe-email-form" onclick="updateModal()"&gt;Save
                  &lt;/button&gt;
  </code></pre>
  
  <p><strong>What can solve my Problem?:</strong></p>
  
  <p>If I could just give a parameter to <code>updateModal</code> it would work but since I call the modal view with <code>id="myModal"</code> by the edit button with <code>data-target="#myModal"</code> I cannot transfer any id.</p>
  
  <p>Here is my JS and what I want is to find the correct parameter for the field <code>oldID</code></p>
  
  <p>Thank you a lot in advance!</p>
  
  <pre><code>function updateModal() {
      var newValues = {};
      newValues["newName"] = $("#newName").val();
      newValues["newAge"] = $("#newAge").val();
      newValues["newID"] = $("#newID").val();
      var oldID = "???";
  
      $.ajax({
          type: "POST",
          contentType: "application/json",
          url: "/api/edit/oldID",
          data: JSON.stringify(newValues),
          dataType: 'json',
          timeout: 100000,
          success: function (data) {
              console.log("SUCCESS: ", data);
              display("SUCCESS");
              resultObj = data.result;
              updateContent(resultObj[0].phone);
          },
          error: function (e) {
              console.log("ERROR: ", e);
              display("ERROR");
              //display(2);
          },
          done: function (e) {
              console.log("DONE");
              display("DONE");
              enableSearchButton(true);
          }
      });
  }
  </code></pre>
  
  <p>and the relevant HTML part</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;br&gt;
      &lt;h3&gt;Overview&lt;/h3&gt;
      &lt;br&gt;
  
      &lt;div class="container" id="modal-submit"&gt;
          &lt;div class="col-12"&gt;
              &lt;table class="table table-hover"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;Name&lt;/th&gt;
                      &lt;th scope="col"&gt;Age&lt;/th&gt;
                      &lt;th scope="col"&gt;ID&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;!--/*@thymesVar id="productList" type="java.util.List"*/--&gt;
                  &lt;tr id="person" th:each="person : ${elementList}"&gt;
  
                      &lt;td th:text="${person.getName()}" id="username"&gt;&lt;/td&gt;
                      &lt;!--/*@thymesVar id="getTradableBTC" type="java.lang.Double"*/--&gt;
                      &lt;td th:text="${person.getAge()}" th:id="${person.getName()+person.getAge()}" id="age"&gt;&lt;/td&gt;
                      &lt;!--/*@thymesVar id="getTop" type="java.lang.Double"*/--&gt;
                      &lt;td th:text="${person.getId()} " th:id="${person.getName()+person.getId()}" id="userID"&gt;&lt;/td&gt;
  
                      &lt;td&gt;
                          &lt;div class="btn-toolbar" role="toolbar"&gt;
                              &lt;!-- Button trigger modal --&gt;
                              &lt;div class="btn-group mr-2" role="group" aria-label="First group"&gt;
                                  &lt;button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                          data-target="#myModal"&gt;
                                      Edit
                                  &lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class="btn-group mr-2" role="group" aria-label="Second group"&gt;
                                  &lt;button type="button" class="btn btn-outline-danger btn-sm" id="delete"&gt;Delete
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary" type="button" id="addElement"&gt;Add Element&lt;/button&gt;
          &lt;button class="btn btn-light" type="button" id="DeleteAll"&gt;Delete all Elements&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"
       data-keyboard="false" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title"&gt;Change data&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"
                          aria-label="Close"&gt;&lt;span
                          aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;input name="referencia" id="newName" type="text"
                                 class="form-control"
                                 placeholder="Enter new name"&gt;
                          &lt;br&gt;
                          &lt;input name="referencia" id="newAge" type="text"
                                 class="form-control"
                                 placeholder="Enter new age"&gt;
                          &lt;br&gt;
                          &lt;input name="referencia" id="newID" type="text"
                                 class="form-control"
                                 placeholder="Enter new id"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-light"
                          data-dismiss="modal"&gt;Discard
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"
                          id="subscribe-email-form" onclick="updateModal()"&gt;Save
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  &lt;br&gt;
  </code></pre>