[Help with svg php AJAX website. 1st site.]

Great site!, Im trying to understand a bit more pdo.. I have the following:

 

I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below:

<script>
function fill_contact(evt) //display click event
{
var country_id = evt.target.id
document.getElementById('country_name').firstChild.data = country_id
}
</script>

My php code is as follows:

<?php
//Define constants
define('DB_DRIVER', "mysql");
define('DB_SERVER', "127.0.0.1");
define('DB_DATABASE', "aeea");
define('DB_USER', "root");
define('DB_PASSWORD', "root");

//Database connection
try {
      $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD);
      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
     die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage());
}
               
//Get data         
$query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?";
$country = 'country_name';

//Create the statement
$stmt = $dbh->prepare($query);
$stmt->execute(array($country));          

//Use data
                $row = $stmt->fetch(PDO::FETCH_ASSOC);                        
                                echo '<pre>', print_r($row), '</pre>';
                               
?>

My Html code is as follows:

<div id="IndexPage">
    <div id="IndexPage_Left">                    
                <div id="IndexPage_Left_top">
                                <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine-->
                                <p></p>
                                <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display-->
                                <p></p>
                                <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display-->
                                 <p></p>
                                <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden-->
                </div>
                <div id="IndexPage_Left_bottom">
                                <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database -->
                </div>
     </div>
  <div id="IndexPage_Right">
                                <svg id="map" version="1.1" and rest of svg code.

My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc.

 

I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details.
How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it.
Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct?
Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form?

 This is my first website.

 

Please help