Viewing values in modal box/pop up - HTML, JavaScript, PHP and JavaScript

I've been trying to retrieve the data from MySQL database in order to display it on a modal/pop-up box in javascript. Here's my current progress:

When you click the "View Images" Button

Here's my snippet code for modal pop up box:

HTML

This html Trigger button will get the Report_ID in its button attribute id to pass it to javascript. " onclick="showDetails(this);">View Images

   <!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
   <div class = "modal-dialog">
      <div class = "modal-content">
         <div class = "modal-header">
           <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>&nbsp;
            <h4 class = "modal-title" id = "myModalLabel">
               Images of the Report
            </h4>
         </div>
         <div class = "modal-body">
            <p>Original Image: <span id = "Orig_Image"></span></p>
            <p>RGB Image: <span id = "RGB_Image"></span></p>
            <!--<img src="smiley.gif" alt="Smiley face" height="200" width="200">-->
         </div>
        <!-- <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>-->
         </div>
      </div>
   </div>

JAVASCRIPT

This javascript code willl be the one to get the Report_ID from the html table. Report_ID will be the identifier in MySQL Query and will be used in the php script Retrieve_Image.php using GET method. If the retrieval of the data is success the javascript will pass the values in to the html with their corresponding ids (ex. ).

function showDetails(button){
    var Report_ID = button.id;
}
$.ajax({
    url: "Retrieve_Image.php",
    method: "GET",
    data: ("Report_ID": Report_ID),
    success: function(response){
        //alert(response);
        var Images = JSON.parse(response);
        $("#Orig_Image").text(Images.Original_Image_Directory);
        $("#RGB_Image").text(Images.RGB_Image_Directory);
        $("#myModalLabel").text(Images.Image_Name);
    }
    error: function(e){
        alert('Error: '+e);
    }  
});

PHP

This script / php code will retrieve the images data and will return its retrieved values to javascript using json encode.

 <?php
session_start();
include_once ("../System_Connector.php");
include_once ("Admin_Session_Checker.php");

$Report_ID = $_GET["Report_ID"];

$Retrieve_Report = "SELECT Image_Name,Original_Image_Directory,RGB_Image_Directory FROM Report_Image WHERE Report_ID = $Report_ID";
$Retrieval_Image_Query = mysqli_query($Connection, $Retrieve_Report);

if(!$Retrieval_Image_Query){
     echo "<script type = 'text/javascript'> alert('Error: Could not retrieve data from database because of this error: '".mysqli_error($Connection)."') </script>";
}

$Report_Result = mysqli_fetch_object($Retrieval_Image_Query);
echo json_encode($Report_Result);
?>

PROBLEM

It does not returning any data from php script. I tried to run the php script by putting a value on $_GET["Report_ID"]; and it doesn't have a problem. I think the problem is on the trigger button, where it gets the Report_ID using button id. How can i find and fix the problem? All I want is to display the text values first for Original Image and RGB Image.

Example of what I'm trying to achieve (Output goal):

P.S. I used the bootstrap Modal Box: https://www.tutorialspoint.com/bootstrap/bootstrap_modal_plugin.htm