Reload DIV with new images - php

Question

I have an employee database which includes images as well as their work location (specialty). I have created a page where I fill out a form and upload the image to a directory and the path to the database. I then load the main page where I pull in all the images from the database (into the "photos" DIV. Everything works fine.
What I would like to do is reload the images in the DIV based on a MySQL query from a button. For example, instead of showing all employees, I only want to see those who have a specific job function i.e. Management. I currently have this accomplished by redirecting to a new page, where I run a specific query and that works fine as well. However, I'd like to learn how this is done without creating a new page for each query. I've spent many days looking at AJAX and PHP tutorials, which I how I was able to accomplish what I have, but I can't find a method to do what I want. This is the relevant part of my code:
Main.php
<div class="container-fluid">
<div class="row">
<div class ="col-lg-12" style="width: 18%; height: 100%; border:3px solid red;">
MANAGEMENT
HIGH
</div>
<?php
include ('db_connect.php');
//include_once ('functions.php');
$result = $db->query("SELECT * from monctonfir order by initials ASC");
if($result->num_rows > 0){
while ($row = $result->fetch_assoc()){
$imageURL = 'image/'.$row["file"];
$initial = $row["initials"];
$name = $row["name"];
?>
<div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
<div class="card text-center" style="width: 5rem;">
<a href = "#">
<img class="img card-img-top" src = "<?php echo $imageURL ?>">
</a>
<div class = "card-body">
<h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial ?></h5>
</div>
</div>
</div>
<?php }
} ?>
</div>
Can someone point me in the right direction?
Thanks!

Answer 1

You don't need jQuery for what you are doing. You can use query/GET parameters to build your sql so you don't have to create a different page. Like:
<div class="container-fluid">
<div class="row">
<div class ="col-lg-12" style="width: 18%; height: 100%; border:3px solid red;">
MANAGEMENT
HIGH
ALL
</div>
<?php
include ('db_connect.php');
//include_once ('functions.php');
$sql = "SELECT * from monctonfir WHERE 1 ";
if(isset($_GET['job'])) $sql .= " AND job = '".$_GET['job']."' ";
$sql .= " order by initials ASC";
$result = $db->query($sql);
if($result->num_rows > 0){
while ($row = $result->fetch_assoc()){
$imageURL = 'image/'.$row["file"];
$initial = $row["initials"];
$name = $row["name"];
?>
<div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
<div class="card text-center" style="width: 5rem;">
<a href = "#">
<img class="img card-img-top" src = "<?php echo $imageURL ?>">
</a>
<div class = "card-body">
<h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial ?></h5>
</div>
</div>
</div>
<?php }
} ?>
</div>

Answer 2

The simplest way is to use the load function of Jquery
Jquery
For example:
$( "#divID" ).load( "loadEmploye.php", { parameters1: 25, parameters2:3 });