I’m trying to create an admin page and below is my code for it and its multiple panels, wherein clicking the respective images will result in changing the replaceThis div to its respective php file content.

<div class="left-container">
    <img src="" id="Dashboard" alt="Dashboard">
    <img src="" id="ManUse" alt="Manage Users">
    <img src="" id="ManFile" alt="Manage Files">
    <img src="" id="FfApprove" alt="Files for Approval">
</div>
<div class="right-container" id="replaceThis">

    <?php 
        switch($_SESSION['admain']){
            case 'Dashboard':
                         
            break;
            case 'ManUse':
                           
            break;
            case 'ManFile':
                            
            break;
            case 'FfApprove':

            break;
        }
    ?>
</div>

This is my javascript code so far, and the contents of the respective PHP files are currently empty because I don’t know if I need to print a function or just call the entire php file (I don’t know how to do this yet) or should I incorporate the `$_SESSION[‘admain’] into the php file.

$(document).ready(function() {
  $("#Dashboard").click(function() {
    let selID = $(this).attr('id');
    $("#replaceThis").load(".modular/dasbord.php", {
      newDis : selID
    });
  });
});

$(document).ready(function() {
  $("#ManUse").click(function() {
    let selID = $(this).attr('id');
    $("#replaceThis").load(".modular/manuser.php", {
      newDis : selID
    });
  });
});

$(document).ready(function() {
  $("#ManFile").click(function() {
    let selID = $(this).attr('id');
    $("#replaceThis").load(".modular/manfile.php", {
      newDis : selID
    });
  });
});

$(document).ready(function() {
  $("#FfApprove").click(function() {
    let selID = $(this).attr('id');
    $("#replaceThis").load(".modular/forapprove.php", {
      newDis : selID
    });
  });
});