Update quantity in dynamic table with Ajax

Question

I have a shopping cart that modifies the quantity through ajax by functions remove and adiciona. I have the function atualizaQtd that by ajax returns the current amount. How could you insert this new amount into the td which called the add/remove function instead of the variable {{ $product['qtd'] }}?

@extends('store.index')

@section('content')
<div class="container">
<section class="carrinho">
    <h1>Carrinho</h1>
    <table class="table">
        <tr>
            <th>Item</th>
            <th>Preço</th>
            <th>Quantidade</th>
            <th>Subtotal</th>
        </tr>
        @foreach ($products as $product)
            <tr>
                <td>
                    <img class="img-produto-carrinho" src="{{ asset('storage/' . $product['item']->image) }}">
                    {{ $product['item']->name }}
                </td>
                <td>R$ {{ $product['item']->price }},00</td>
                <td class="qtd">
                    <a onclick="remove({{ $product['item']->id }})" href="#"><i class="zmdi zmdi-minus-circle"></i> </a>
                    {{ $product['qtd'] }} //Ao clicar no link de remove ou adiciona atualiza através do PHP a quantidade
                    <a onclick="adiciona({{ $product['item']->id }})" href="#"> <i class="zmdi zmdi-plus-circle"></i></a>
                </td>
                <td>R$ {{ $product['item']->price * $product['qtd'] }},00</td>
            </tr>
        @endforeach
        <tr class="total-cart">
            <td></td>
            <td></td>
            <td>Total</td>
            <td>R$ {{ $cart->getTotalPrice() }},00</td>
        </tr>
    </table>
    <button class="btn btn-success btn-finalizar">Finalizar Compra</button>
</section>
</div>  
@endsection

@push('js')
<script>

    function atualizaQtd(id) {
        $.ajax({
            type:'GET',
            url:'/produto-quantidade/' + id,
            success:function(data){
                console.log(data); //Retorna a quantidade atualizada do produto que chamou a função adiciona/remove. Preciso colocar esse valor no lugar de {{ $product['qtd'] }}

            }
        });
    }

    function remove(id) {
        event.preventDefault();
        $.ajax({
            type:'GET',
            url:'/carrinho-remove/' + id,
            success:function(data){
                atualizaQtd(id);
                //location.reload();
            }
        });
    }

    function adiciona(id) {
        event.preventDefault();
        $.ajax({
            type:'GET',
            url:'/carrinho-adiciona/' + id,
            success:function(data){
                atualizaQtd(id);
                //location.reload();
            }
        });
    }

</script>
@endpush

Answer 1

You can do the following, return the variable {{ $product['qtd'] }} within a tag span and identifies this tag with a id, example:

<td class="qtd">
    <a onclick="remove({{ $product['item']->id }})" href="#"><i class="zmdi zmdi-minus-circle"></i> </a>
    <span id="quantidade_{{ $product['item']->id }}">{{ $product['qtd'] }}</span>
    <a onclick="adiciona({{ $product['item']->id }})" href="#"> <i class="zmdi zmdi-plus-circle"></i></a>
</td>

And change your function atualizaQtd to modify the tag text span, example:

function atualizaQtd(id) {
  $.ajax({
    type:'GET',
    url:'/produto-quantidade/' + id,
    success:function(data){
      $("span[id='quantidade_" + id +"']").html(data); // Atualiza o valor da quantidade na tag span dentro do TD
      console.log(data); //Retorna a quantidade atualizada do produto que chamou a função adiciona/remove
    }
  });
}

Editing:

We have yet to define a id unique for each tag span, when performing one of the functions to add/remove the same was updating the quantity of all products.