jQuery not setting textContent

I have a HTML file where I created my buttons and labels with for loop. (Django project)

Then, I tried to add some functionality using JS but my buttons don't work.
My failed part is +, - and update buttons with their functionality.

I don't know whether it is correct approach or not but I tried to differentiate my buttons assigning "button name"+{{product.id}} to their IDs.

 <!-- start loop -->
{% for item in cart %}
<!-- assign product variable -->
{% with product=item.product %}
<br>
<div class="row mb-4 border product-item">
<div class="col-md-3 col-lg-2 order-md-first bg-light">
<img class="img-fluid mx-auto d-block" width="200px" alt="Responsive image" src="{{ product.image.url }}">
<!-- Product image -->
</div>
<div class="col-md-9 col-lg-10 ps-md-3 ps-lg-10">
<a href="{{ product.get_absolute_url }}" class="text-info text-decoration-none">
<h1 class="h5 pt-2"> {{ product.title }} </h1>
</a>
<div class="border">
<div class="col border-bottom">
<div class="row p-3">
<div class="col-6"> Product </div>
<div class="col-6 text-end"><span class="h6 fw-bold">$ {{ product.price|mul:item.qty}} </span></div>
</div>
</div>
<div class="col">
<div class="row p-3">
<div class="col-12">
<button type="button" id="qty-decrease-button{{product.id}}" data-index="{{product.id}}" class="btn btn-primary btn-sm increase-button"> - </button>
 
<label id = "qty-show{{product.id}}" data-index="{{product.id}}" > {{item.qty}} </label>
 
<button type="button" id="qty-increase-button{{product.id}}" data-index="{{product.id}}" class="btn btn-primary btn-sm decrease-button"> + </button>
<br> <br>
<button type="button" data-index="{{product.id}}" class="btn btn-primary btn-sm update-button"> Update </button>
 
<button type="button" data-index="{{ product.id }}" class="btn btn-danger btn-sm delete-button"> Delete </button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endwith %}
{% endfor %}

My JS codes at the end of this HTML code is:

     // Update button
$(document).on('click', '.update-button', function (e) {
e.preventDefault();
var theproductid = $(this).data('index');
$.ajax({
type: 'POST',
url: '{% url "cart-update" %}',
data: {
product_id: $(this).data('index'),
// product_quantity: $('#select' + theproductid + ' option:selected').text(),
product_quantity:  $('#qty-show' + theproductid).text(),
csrfmiddlewaretoken: "{{csrf_token}}",
action: 'post'
},
success: function (json) {
// reload page
location.reload();
// update cart
document.getElementById("cart-qty").textContent = json.qty
// update subtotal
document.getElementById("total").textContent = json.total
},
error: function (xhr, errmsg, err) {
}
});
})
</script>
<!-- Increment-Decrement buttons function -->
<script>
$(document).on('click', '.increase-button', function (e) {
var theproductid = $(this).data('index');
var counter = $('#qty-show' + theproductid);
x = counter.textContent;
// e.preventDefault();
counter.textContent = ++x;
})
$(document).on('click', '.decrease-button', function (e) {
var theproductid = $(this).data('index');
var counter = $('#qty-show' + theproductid);
x = counter.textContent;
// e.preventDefault();
if (x<=1)
{
counter.textContent = 1;
}
else
{
counter.textContent = --x;
}
})
</script>

Here you can see rendered HTML code:
(+/-/Update buttons does not work.)

If someone can help me for making these buttons functional, I would be appreciated!

counter is a jQuery collection, not a raw DOM element. .textContent is a property of raw DOM elements.

You can either access the raw DOM element, or use the jQuery API to stet text. Either do

var counter = $('#qty-show' + theproductid).get(0);

or do

x = counter.text();
...
counter.text(x++);