title: Target element within clicked div only
body: <p>I have formatted an API response to list certain properties as below.<br><br>
  When a users clicks on a <code>delete</code> link on a certain list item, I need to take the <code>taskID</code> from that item and be able to use it in <code>completeTask()</code>.<br><br>
  At present, no matter which list-item I click the <code>delete</code> link in - I always get the <code>taskID</code> of the first in the list.<br><br>
  How should I target <code>taskID</code> of <strong>only</strong> the list item upon which the <code>delete</code> was clicked ? <br><br>
  <strong>API call:</strong></p>
  
  <pre><code>axios({
              method: 'GET',
              auth: {
                  username: APIKey,
                  password: ':xxx'
              },
              url: 'https://apiExaple.json',
          })
          .then(function (response) {
              $(response.data['todo-items']).each(function () {
                  var taskID = this.id;
                  var taskTitle = this.content;
                  $(resultElement).append(
                      '&lt;div class="taskDiv"&gt;' +
                          '&lt;li style="list-style-type: none"&gt;' +
                              '&lt;p&gt;' + taskTitle + '&lt;/p &gt;' +
                              '&lt;p id="taskIDListItem"&gt;' + taskID + '&lt;/p&gt;' +
                              '&lt;p&gt;&lt;a href="#" id="deleteBtn"&gt;Delete&lt;/a&gt;' + '&lt;a href="#" onclick="completeTask()" id="completeBtn"&gt; | Complete | &lt;/a&gt;&lt;/p&gt;' +
                          '&lt;/li&gt;' + '&lt;hr&gt;' +
                      '&lt;/div&gt;');
                  //console.log('Task ID is: ' + taskID);
              });
          })
          .catch(function (error) {
              resultElement.innerHTML = generateErrorHTMLOutput(error);
          });
  </code></pre>
  
  <hr>
  
  <p><strong>Function which uses obtained taskID:</strong></p>
  
  <pre><code>function completeTask() {
      var task_id = this.$("#taskIDListItem").text();
      console.log(task_id);
  
      axios({
              method: 'PUT',
              url: 'https://apiExaple.json',
              auth: {
                  username: APIKey,
                  password: ':xxx'
              },                
          })
          .then(function (response) {
              console.log(response.statusText);    
          })
          .catch(function (error) {
              console.log(error.statusText);
          })
  
  }
  </code></pre>
  
  <hr>
  
  <p><strong>HTML for API response</strong></p>
  
  <pre><code>&lt;!-- All Tasks --&gt;
  &lt;div class="allTasks"&gt;
     &lt;h4 class="h4-well-title"&gt;
        &lt;i class="fa fa-fw fa-list"&gt;&lt;/i&gt; Tasks
        &lt;span&gt;
           &lt;h6 id="todaysDate"&gt;&lt;/h6&gt;
        &lt;/span&gt;
     &lt;/h4&gt;
     &lt;hr&gt;
     &lt;div class="panel-body" id="getAllTasksResult"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>