javascript - How can I delete a specific object from Parse query results? -

my code runs through query results , puts them in list user see. how can add delete button deletes object named in list item? @ moment buttons delete last result.

query.exists("servicename"); query.find({     success: function(results) {         //clears current list         (function($) {             $("#service-table li").remove();         })(jquery);         //retrieves  new up-to-date list         (var = 0; < results.length; i++) {             var object = results[i];              //inserts each retrieved servicename list item html             (function($) {                 $('#service-table').append('<li class="list-group-item"><span class="badge" id="delete">delete</span><a href="#" id="listitemservice">' + object.get('servicename') + '</a></li>');             })(jquery);              //supposed delete relevant object delete buttons delete last list item             (function($) {                 $('#delete').on('click', function() {                     object.destroy({                         success: function(object) {},                         error: function(object, error) {}                     })                 });             })(jquery);         }     },     error: function(error) {} }); 

here's example of list.

here couple of issues:

you using same id "delete" on of delete buttons. id should unique 1 element; use class when referencing more 1 element. code assigns same 'click' event elements id="delete"; doesn't differentiate between delete buttons.
https://css-tricks.com/the-difference-between-id-and-class/

each iteration of loop reassigns variable object next element in results. event assigning delete button @ end of loop looks variable object see destroy, last iteration of loop, object points last element in results.

one solution use data-attributes have each delete button reference appropriate item in results. can assign data-id attribute each delete button , set value index of corresponding results item. then, when binding 'click' event delete buttons, use event.target clicked element's data-id value , destroy appropriate object.

for (var = 0; < results.length; i++) { // inserts each retrieved servicename list item html // assigns data-id value each delete button     (function($) {         $('#service-table').append('<li class="list-group-item"><span class="badge delete" data-id=i>delete</span><a href="#" id="listitemservice">' + object.get('servicename') + '</a></li>');     })(jquery);      (function($) {         $('.delete').on('click', function(event) {             // gets value of clicked delete button's data-id attribute             var dataid = $(event.target).attr('data-id');             // finds results item index dataid             var object = results[dataid];             object.destroy({                 success: function(object) {},                 error: function(object, error) {}             })         });     })(jquery); },