Not: İstediğiniz temel olarak jquery closest ile yapılabilir ama biraz detaylı anlatacağım.


Bu tarz işlerde JQuery ve PHP kısmını ayırmalısınız. JQuery içinde PHP yazmak pek mantıklı değil zaten.

3 yıl önce benzeri bir yapıda kod yazmıştım, işinizi görebilir.

Backend isteklerini göndermek için axios kullanabilirsiniz, axios'u araştırın beraber kod yazdığımız arkadaş fonksiyonel hale getirmek için bu şekilde fonksiyon oluşturmuş;

function fetchApi(url, data = {}, response) {
    axios.post(url, data)
      .then(function (resp) {
        if (!resp.data.success && Array.isArray(resp.data.msg)){
          resp.data.msg.map(function (val) {
            toastr.error(val);
          })
        } else if (!resp.data.success && resp.data.msg){
          toastr.error(resp.data.msg);
        }
        if (resp.data.success && resp.data.msg){
          toastr.success(resp.data.msg);
        }
        response(resp.data);
      });
}

Projede twig template kullanıldı, app.html.twig ve diğer addCategoryModal.html.twig dosyalarını include edilmiş gibi düşünebilirsin.

{% extends 'root/app.html.twig' %}
{% block content %}
<div class="button-custom">
    <button class="btn btn-primary btn-fill btn-wd float-right" data-toggle="modal" data-target="#categoryModal">Kategori Ekle</button>
</div>
<div class="card">
    <div class="card-body">
        <h4 class="card-title pb-2">Kategoriler</h4>
        <div class="table-responsive">
            <table class="table table-striped" id="catList">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Kategori Ad</th>
                    <th>Durum</th>
                    <th>Duzenle</th>
                    <th>Sil</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
        {% include 'admin/category/addCategoryModal.html.twig' %}
    {% endblock %}
    {% block js %}
<script>
      $(document).ready(function() {
        function tableRow(id, order, name, situation, situationName){
          return $('<tr id="'+id+'" situation='+situation+' name="'+name+'" order="'+order+'">' +
              '<th>'+order+'</th>' +
              '<td>'+name+'</td>' +
              '<td>'+situationName+'</td>' +
              '<td><button class="btn btn-success btn-sm edit text-white" data-toggle="modal" data-target="#updateCategoryModal">Düzenle</button></td>' +
              '<td><button class="btn btn-danger btn-sm delete" data-toggle="modal" data-target="#deleteCategoryModal">Sil</button></td>' +
              '</tr>')
        }
        fetchApi('/api/admin/category/list', {}, function (res) {
            res.data.map(function (val) {
                let situationName = val.situation ? 'Aktif' : 'Pasif';
                let row = tableRow(val.id, val.order, val.name, val.situation, situationName);
                $('#catList > tbody').append(row);
            });
        });
        $('#createCategory').on('click', function () {
          var data = {
            catName: $('#catName').val(),
            order: $('#order').val(),
            situation: $('#situation').find('option:selected').val(),
          };
          if (data.catName.length > 0 && data.order.length > 0){
            fetchApi('/api/admin/category/create', data, function (res) {
              if (res.success){
                window.location.reload();
              }
            })
          } else {
            toastr.warning('Alanlari kontrol ediniz.');
          }
        });

        $('#catList').on('click', '.delete', function() {
          var id = $(this).closest('tr').attr('id');
          $('#catList').data('deleteId', id);
        });

        $('#catList').on('click', '.edit', function() {
          var id = $(this).closest('tr').attr('id');
          var name = $(this).closest('tr').attr('name');
          var situation = $(this).closest('tr').attr('situation');
          var order = $(this).closest('tr').attr('order');
          $('#catList').data('editId', id);
          $('#uCatName').val(name);
          $('#uOrder').val(order);
          $('#uSituation').val(situation);
        });
      });
    </script>
    {% endblock %}

Kategori table tablosuna catList adında ID verilmiş ve kategori içeriği JS ile doldurulmuş.

        function tableRow(id, order, name, situation, situationName){
          return $('<tr id="'+id+'" situation='+situation+' name="'+name+'" order="'+order+'">' +
              '<th>'+order+'</th>' +
              '<td>'+name+'</td>' +
              '<td>'+situationName+'</td>' +
              '<td><button class="btn btn-success btn-sm edit text-white" data-toggle="modal" data-target="#updateCategoryModal">Düzenle</button></td>' +
              '<td><button class="btn btn-danger btn-sm delete" data-toggle="modal" data-target="#deleteCategoryModal">Sil</button></td>' +
              '</tr>')
        }
        fetchApi('/api/admin/category/list', {}, function (res) {
            res.data.map(function (val) {
                let situationName = val.situation ? 'Aktif' : 'Pasif';
                let row = tableRow(val.id, val.order, val.name, val.situation, situationName);
                $('#catList > tbody').append(row);
            });
        });

api/admin/category/list bölümüne istek atılıyor ve liste çekiliyor. let row = tableRow(val.id, val.order, val.name, val.situation, situationName); ile tableRow fonksiyonundan satır oluşturuluyor, $('#catList > tbody').append(row); şeklinde tabloya ekleniyor.

Tabloya veri eklenirken;
'<td><button class="btn btn-success btn-sm edit text-white" data-toggle="modal" data-target="#updateCategoryModal">Düzenle</button></td>' +
bold yaptığım bölümdeki gibi edit - delete veya hangi işlem kullanılacak ise onunla ilgili class ekleniyor. Sebebi ise her ID tek bir yerde kullanılır, aynı işlem birden fazla elementte yapılacak ise class kullanmak daha mantıklı.

Peki hangi satıra tıklandığını nasıl anlayacağız?

        $('#catList').on('click', '.edit', function() {
          var id = $(this).closest('tr').attr('id');
          var name = $(this).closest('tr').attr('name');
          var situation = $(this).closest('tr').attr('situation');
          var order = $(this).closest('tr').attr('order');
          $('#catList').data('editId', id);
          $('#uCatName').val(name);
          $('#uOrder').val(order);
          $('#uSituation').val(situation);
        })

catList ID'sine sahip tablonun altındaki .edit (class) elementine tıklandı ise $(this).closest('tr').attr('id'); şeklinde verisine ulaşıyoruz.

closest kullanımı : https://api.jquery.com/closest/

Ne yaptık? ajax / axios vb bir kütühane ile backend php bölümüne istek attık, gelen veriyi javascript ile tabloya ekledik ve düzenleme/silme işleminde seçtiğimiz verinin bilgilerine ulaştık.

Bundan sonra veri ile ilgili her şeyi yapabilirsiniz, örneğin güncelletmek mi istiyorsunuz? seçilen verinin ID'sinin backend'e gönder SQL ile sorgu yaptır ve veriyi geriyi istediğin yerde işle.

Backend;

    public function getCategories($request, $response){
        $validation = $this->validator->validate($request, [
        ]);

        if ($validation->failed())
        {
            return $response->withJson([
                'success' => false,
                'msg' => $_SESSION['errors'],
            ]);
        }

        $categories = Category::orderBy('order')
            ->where('situation', 1)
            ->get();
        return $response->withJson($this->getResponseData(
            ['categories' => $categories]
        ));
    }

Yeni başladığınızı belirtmişsiniz ne kadar açıklayıcı oldu bilmiyorum büyük ihtimalle freamworkte kullanmıyorsunuz.
/api/categories/index.php
/api/categories/add.php
/api/categories/delete.php?id
/api/categories/edit.php?id

şeklinde yapabilirsiniz. Ajax ile birinci bölüme attığınız istekte verileri SQL'den çekip tabloya işlersiniz, tablodan istediğiniz bölüme tıklayınca diğer işlemleri yaptırırsınız.