I have a data from mysql database. I these data comes with a individual unique ids in a table format, when i click on a particular table row, i want to post that id via ajax and append the result in a div.

code for search and retrieving data from mysql

<?php
require ('config/searchConfig.php');
$return = '';
if(isset($_POST["query"]) && !empty($_POST['query']))
{
    $search = mysqli_real_escape_string($conn, $_POST["query"]);
    $query = "SELECT * FROM products WHERE productName  LIKE '%".$search."%' ORDER BY ID DESC " ;
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0)
{
    $return .='
    <div class="table-responsive">
    <table class="table table-striped">
    <tr>
        <th>Product Name</th>
        <th>Price</th>
    </tr>';
    while($row1 = mysqli_fetch_array($result))
    {
        $return .= '

        <tr id="add-btn" style="height:5em;" >
        <td id="getID" value='.$row1["ID"].'>'.$row1["ID"].'</td>
        <td id="productName"  value='.$row1["productName"].'>'.$row1["productName"].'</td>
        <td id="price" value='.$row1["price"].'>GHC '.$row1["price"].'.00</td>
        </tr>
        ';
    }
    '</table></div>';

    echo $return;
    }
    else{
        echo 'No product Found with that Name';
    }
}

?>

code for appending the result in a div when you click on the table row.

<script type="text/javascript">

 $(document).on('click', '#add-btn', function() {
           var getID = $('#getID').attr('value');  
      $.ajax({    //create an ajax request to display.php
        url:"getPrice.php",
            method:"GET",
            data:{getID:getID},             
        success: function(data){                    
          $("#dynamicAddRemove").append(data);  
        }

    });
});
</script>