In my Django app, users can save different items to a list. Each item has a corresponding delete button next to it.
Currently, when I click on any delete button, it always selects and deletes the first item in the list. This is because my JavaScript code uses the `var.product` selector which returns the value of the first element with the class name `.substitut`. I've tried using `$(this)` but haven't been successful.
How can I ensure that each delete button only targets and deletes its corresponding product?
This is an excerpt from my HTML:
{% extends 'finder/base.html' %}
{% block content %}
<header class="masthead" id='fav_list'>
<div class="col-lg-12">
...
</div>
<div class="w-75 mx-auto container-fluid" style='background-color: transparent;'>
{% for saved in saved_list %}
<div class='row d-flex justify-content-between'>
...
<form class="form_id" method='post'>
<button class='btn substitut' value='{{ saved.id }}'><i class='fas fa-trash-alt'></i></button>
</form>
...
</div>
{% endfor %}
</div>
...
This is an excerpt from my AJAX script:
$(".form_id").on('submit', function(event) {
event.preventDefault();
var product = $(this).find('.substitut').val();
console.log(product);
var url = '/register/delete/';
$.ajax({
...
});
});