How to add a subtract option to a table in Django

Question

I am making my first application with Django. The goal is to have a table that displays the current inventory of laboratory reagents. Once a reagent is taken out of storage a user will be able to hit a subtract button to subtract from the current inventory. Currently I have a table that displays the reagent name and quantity. I would like to add a column to the table that has a subtract button that will subtract one from the corresponding reagents current inventory.

Can anyone please give me some suggestions on how to implement a subtract button? Any help would be much appreciated.

models.py
class Reagentquant(models.Model):

    Name_Of_Reagent= models.TextField()
    Reagent_Quantity= models.TextField()

tables.py

class ReagentquantTable(tables.Table):
    class Meta:
        model = Reagentquant
        template_name = 'django_tables2/bootstrap4.html'
        row_attrs = {'reagent_id': 'reagent'}
    edit= TemplateColumn(template_name='inventory/update_column.html')

views.py

def reagentquant(request):
    table = ReagentquantTable(Reagentquant.objects.all())
    RequestConfig(request).configure(table)
    return render(request, 'inventory/quant.html', {'table': table})


class RemoveReagentView:
    def post(self, request, *args, **kwargs):
        reagent_id = request.POST['reagent_id']
        reagent = Reagentquant.objects.filter(id=reagent_id)

        reagent.update(Reagent_Quantity=F('Reagent_Quantity')-1)
        data = {"count": reagent.Reagent_Quantity}
        return JsonResponse(data)

template 

<a class="btn btn-info btn-sm">-</a>

<script type="text/javascript">

  $(document).on('click', 'odd', function (e) {  // Where `element_with_reagentID_class` is the common classname of ALL elements that have your `reagent_id` inserted into them
      e.preventDefault();

      var $this = $(this);
      var reagent_id = $this.attr('reagent')  // Where `reagent_id` is whatever the attribute is that you added

      $.ajax({
          type: "POST",
          url: "{% url 'inventory-quant' %}",  // Where `reagent_urlname` is the name of your URL specified in urls.py
          data: {reagent_id: reagent_id, csrfmiddlewaretoken: "{{ csrf_token }}"}
      })
      .done(function (response){
          console.log(response)
      })
  })}


</script>

/script>
</td>

                    </tr>



                    <tr scope="row" reagent_id="reagent" class="odd">

                            <td >17</td>

                            <td >CRP</td>

                            <td >22</td>

                            <td >

<a class="btn btn-info btn-sm" onClick="testMe()">-</a>

<script type="text/javascript">

  $(document).on('click', 'reagent', function (e) {  // Where `element_with_reagentID_class` is the common classname of ALL elements that have your `reagent_id` inserted into them
      e.preventDefault();

      var $this = $(this);
      var reagent_id = $this.attr('reagent')  // Where `reagent_id` is whatever the attribute is that you added

      $.ajax({
          type: "POST",
          url: "/quant",  // Where `reagent_urlname` is the name of your URL specified in urls.py
          data: {reagent_id: reagent_id, csrfmiddlewaretoken: "NjfgIlWzzSBwq8EJh5jsdIqns4tK6tMFLH4vEkUSWAHW5VCHigpVpmzkDPBwbyL3"}
      })
      .done(function (response){
          console.log(response)
      })
  })}


</script>
</td>

                    </tr>



                    <tr scope="row" reagent_id="reagent" class="even">

                            <td >20</td>

                            <td >MTX</td>

                            <td >22</td>

                            <td >

Answer 1

To update the quantity, you could do something like this:

class RemoveReagentView(View):
    def post(self, request, *args, **kwargs):
        reagent_id = request.POST['reagent_id']
        reagent = Reagentquant.objects.filter(id=reagent_id)

        reagent.update(Reagent_Quantity=F('Reagent_Quantity')-1)
        data = {"count": reagent.Reagent_Quantity}
        return JsonResponse(data)

The next step would be hooking it into the django_tables2 rendering. Your best bet would be to add a custom row attribute of the reagent.id value, capture it via Javascript, and then use an AJAX POST request to call the RemoveReagentView() view I specified above. You would obviously need a +/- button as well, which it seems you can add using something along the lines of this answer.

Overall it will take a bit of clever hacking around, but it seems very doable.

edit

Here is an example AJAX request:

$(document).on('click', '.element_with_reagentID_class', function (e) {  // Where `element_with_reagentID_class` is the common classname of ALL elements that have your `reagent_id` inserted into them 
    e.preventDefault();
    
    var $this = $(this);
    var reagent_id = $this.attr('reagent_id')  // Where `reagent_id` is whatever the attribute is that you added

    $.ajax({
        type: "POST",
        url: "{% url 'reagent_urlname' %}",  // Where `reagent_urlname` is the name of your URL specified in urls.py
        data: {reagent_id: reagent_id, csrfmiddlewaretoken: "{{ csrf_token }}"} 
    })
    .done(function (response){
        console.log(response)
    })
})