jQuery.remove() and array.splice() issues

Question

So I have a page that has a list of items and a shopping list. If you add x number of items from the list of items to the shopping list, then try to delete them one by one by clicking on the item in the shopping list and hitting delete on the modal that opened it - first time. Now here comes the problem, if you try to do this again, say add another set of x amount of items to the shopping list and then try to remove them one by one again. I get unpredictable results as soon as you click the delete button on the modal, it either deletes all shopping list items or deletes 2 or 3 items along with the items you should delete.

This is a simple jQuery.remove() and array.splice, but I can't get it to work. Apparently it was more complicated than I thought and I tried a lot of different things.

This is the page: http://bigbiz.io/pos/

Thanks in advance!

rebuild code

Answer 1

I got it working. When I include this in the bootstrap "show" script, the "delete" button within the modal is triggered multiple times. Moving the button script externally is the solution.