title: Making onClick delete function for multiple list items
body: <p>I'm currently working on a custom commenting solution for SharePoint pages using the Rest API. I'm having trouble making delete buttons for each comment based on their id.</p>
  
  <p>My Delete function looks like this and deletes list items based in id:</p>
  
  <pre><code>function deleteListItems(id) {
  $.ajax  
      ({  
          url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Comments')/items(" + id + ")",  
          type: "POST",  
          headers:  
      {  
          "Accept": "application/json;odata=verbose",  
          "Content-Type": "application/json;odata=verbose",       
          "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
          "IF-MATCH": "*",  
          "X-HTTP-Method": "DELETE"  
      },  
      success: function()  
      {  
          window.location.reload; 
      },  
      error: function (error) {
          alert(JSON.stringify(error));  
      }  
  });  
  }   
  </code></pre>
  
  <p>Each comment are created from an array of comment objects with distinct id's and for each of them i create a delete button from the following snippet:</p>
  
  <pre><code>for (var i = 0; i &lt; commentObj.length; i++) {
  
      //Making of the comment contents
  
      var deleteBtn = document.createElement("a");
      btnContent = document.createTextNode("Delete");
      deleteBtn.appendChild(btnContent);
      deleteBtn.onclick = function(){deleteListItems(commentObj[i].Id)};
      newComment.appendChild(deleteBtn);
  }
  </code></pre>
  
  <p>Now the issue is that all the delete buttons delete the last item in the array of comments instead of the comment it's attached too. Is there a way to "prime" the delete function for each button with the correct ID instead of just deleting the last item? </p>