Searching for the next table after a clicked element

Question

Hello, I’m trying to fill the next table closer to the clicked button, but I’m not getting.

It is important that it be the next one right after, because there are several tables with the same class, will they help me??

Here is the javascript:

 $(".btnMostrarCategoria").click(
        function() {

            var nome = $(this).data('nome');

            jQuery("#tabelaUploads tbody").html("");

            console.log($(this).next("table"));

            $.ajax({
              url: "/painel/mostrarUploadsCategorias",
              method: 'POST',
              data: {_token: jQuery(".token").val(), nome: nome},

              success: function(e) {
                console.log(e);
                e.forEach(function(item, indice) {
                    //remove o diretório da string e só deixa o nome final do arquivo
                    var nomeArquivo = item.replace('public/painel/categorias/' + nome + "/", ""); 
                    $(this).find('.tabelaUploads tbody').append("<tr><td>" + nomeArquivo + "</td> <td><a class='btn btn-success' href=\"/painel/fazerDownload/" + nome + "/" + nomeArquivo + "\">Download</a> <button type='button' class='btn btn-danger' onclick=\"excluirUpload('" + item + "')\">Excluir</button></td></tr>");
                });
              }
            }).done(function() {        //só abre o modal assim que terminar a requisição ajax
                hidePleaseWait();
            });
        }
    );

HTML:

@foreach($categorias as $categoria)
                    @if($loop->first)
                      <div class="box"><!-- Usar [.box collapsed-box] nos demais -->
                    @else
                      <div class="box collapsed-box"><!-- Usar [.box collapsed-box] nos demais -->
                    @endif

                      <div class="box-header with-border">

                        <input type="hidden" name="" id="nomeCategoria" value="{{$categoria->nome}}">
                        <h3 class="box-title" data-widget="collapse">{{$categoria->id}}  -  {{ $categoria->nome }}</h3>

                        <div class="box-tools pull-right">
                          <button type="button" class="btn btn-box-tool btnMostrarCategoria" data-widget="collapse" data-toggle="tooltip" title="Collapse" data-nome={{ $categoria->nome }}>
                            @if($loop->first)
                              <i class="fa fa-minus"></i></button>
                            @else
                              <i class="fa fa-plus"></i></button>
                            @endif

                        </div>
                      </div>

                      <div class="box-body">
                        <div class="form-group" id="uploadtr">
                            <input type="hidden" id="idPasta">
                            <br>
                              <input type="file" name="files[]" id="fileupload" data-token="{!! csrf_token() !!}" data-pasta="" class="btn btn-primary" multiple ><br/>

                              <div id="progress" class="progress" role="progressbar">
                                  <div class="progress-bar progress-bar-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">
                                      <span id="progressValue">0%</span>
                                  </div>
                              </div>
                              <span id="mensagemFinalUpload" style="color: #367fa9">Arquivo enviado com sucesso!</span>
                        </div>

                        <table class="table table-bordered table-striped table-hover" class="tabelaUploads" data-teste="whatever">
                            <thead>
                                <tr>
                                    <th width="85%">Arquivo</th>
                                    <th width="15%">Ações</th>
                                </tr>
                            </thead>

                            <tbody>
                            </tbody>
                        </table>
                      </div>

                    </div>
              <!-- /forelse categoria -->
               @endforeach
              <!-- /.box -->
insira o código aqui

Answer 1

Hello, good night.

To be able to select the table closest to your button, I would recommend you create a div for each created category, in this you would group all the buttons and their respective table to that div, with that you would be able to use the command Closest available in the library jQuery.

I made an example so that you can clarify your doubts: https://jsfiddle.net/bh3oj408/