How to pass cell values of a to a controller through ajax by clicking on a button?

I want to get every cell value individually. Here I included jQury what I used to get one cell value, but it's not working. (I got all of cell values with .each function, but not individually). Actually I want to pass all cell values of a row to a controller on click on a cell of same row. What is efficient way?

$(function(){
    $('#product_table').on('click', '#add', function(){
        var p_name = ($(this).closest("tr").find('#p_name').text());
        alert (p_name);
        
       
      /* var token= 
         $.ajax({
            method:"post",
            url:"",
            data: {p_name:p_name, _token:token},
            success:function (response) {
                location.reload();
            }

        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").removeAttr("disabled");
      */
        
    });
});

<table class="table table-bordered table-hover" id="product_table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Details</th>
            <th>Price</th>
            
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    @if($products->count()>0)
        @foreach($products as $product)
        <tr>
            <td id="p_name"></td>
            <td id="p_details"></td>
            <td id="p_price"></td>
            <td>
              <a class="add" data-id="" title="Add"></a>
              <a class="edit" title="Edit"></a>
              <a class="delete"  title="Delete" data-id=""></a>
            </td>
        </tr>
        @endforeach
    @else
        <tr>
            <td colspan="4" class="text-center bg-danger">No Product Data Found</td>
        </tr>
    @endif
    </tbody>
</table>

via Chebli Mohamed