I have the following HTML code which allows me to remove a product when the button Remove is clicked.
<table class="cart-table">
<tbody class="cart-body">
<form method="POST" class='form-product-ajax' action='{% url "shopping-cart-remove" %}' data-endpoint='{% url "shopping-cart-remove" %}'>
{% csrf_token %} {% for item in cart.items %}
<tr class=cart-product>
<td>{{ item.quantity}} x {{ item.product.name }} {{ item.subtotal }}
<input type="hidden" name='id' value='{{ item.product.id }}'>
<button class='remove-btn'>remove</button>
</td>
{% endfor %}
</tr>
</form>
</tbody>
<tr class="cart-total-sec">
<td class="cart-price">{{ cart.total }}</td>
</tr>
</table>
I want to get this working using Jquery/Ajax and currently stuck on the following point. I can dynamically create a Remove button and I assign a class of 'remove-btn' to it but I still can't remove a product. How do I code the Jquery so that clicking on the dynamically generated button executes the action specified on the HTML form action?
$.each(data.products, function(index, value) {
console.log(value)
console.log(data.count)
var removeSpan = thisForm.find(".remove-btn")
cartBody.append("<tr><td>" + value.quantity + " x" + "</td><td>"+ value.name + "</td><td>" + "£" + value.price + "</td>" + "<td><button type='submit' class='remove-btn'>Remove</button></td></tr>")
