Insert return ajax into table

Question

I have a view with a table that has several dynamically generated lines. By clicking the change button opens a modal that I put a value and by ajax I update this value. I need to take this value that ajax is returning and put in td with the CSS class td-rating on that line that was called through the edit link.

<div class="row">
<div class="col-lg-12">
    <div class="card-box">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if(Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
            @endif
            {{ session()->forget('alert-' . $msg) }}
        @endforeach
        <div class="pull-left">
            <a href="#" type="button" class="btn btn-primary waves-effect w-md waves-light m-b-5">Nova Categoria</a>
        </div>    

        <table class="table m-0">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Nota Rock Startup</th>
                    <th>Alterar Nota</th>
                </tr>
            </thead>
            <tbody>
                @foreach($customers as $customer)
                    <tr>   
                        <td>{{ $customer->band_name }}</td>
                        <td class="td-rating">{{ $customer->rating }}</td>
                        <td><a class="btn-modal" href="" data-toggle="modal" data-target="#con-close-modal" data-id="{{ $customer->id }}" data-rating="{{ $customer->rating }}"><i class="zmdi zmdi-edit zmdi-hc-lg"></i></a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
</div>

<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Nota Rock Startup</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-6">  
                    <div class="form-group">
                        <label for="field-1" class="control-label">Nota</label>
                        <input type="hidden" name="id" class="form-control id">
                        <input type="text" name="rating" class="form-control rating">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-info waves-effect waves-light btn-submit">Salvar</button>
        </div>
    </div>
</div>

<script>
$(".btn-modal").click(function() {

    var id = $(this).data("id")
    $(".id").val(id);

    var rating = $(this).data("rating")
    $(".rating").val(rating);

    $(".btn-submit").click(function() {
        var id = $(".id").val();
        var rating = $(".rating").val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'POST',
            url: "/admin/customers-rating/"+id,
            data: {rating},
            success:function(data){
                $('#con-close-modal').modal('hide');
            },
            error: function(){
                console.log("Erro");
            }
        });

    });
});
</script>

Answer 1

You can use the parent() to climb an element above the element being clicked, and then use the prev() to take the first previous element with the class td-rating, it is also possible to call the Parent twice, but the elements have to be in the correct order.

Shortly after $(".btn-modal").click(function() { put the following:

var tdRating = $(this).parent().prev(".td-rating");

Within your Success, simply assign the new value in this way:

tdRating.text(data.rating);