Print The Receipt Only Using PHP or JS

Question

So I am just learning php and creating a OPG Clinic Management System as my first project. I am not watching any tutorials or reading books I am learning on the go. For example I didn't know what CRUD is until I needed to implement that in the System.

Right Now I am facing an issue where I am unable to print only the receipt section and not the page like I don't want the even the top parts of the page where they show the title of page number btw I don't have receipt printer to test in yet.

So I want to print only section within this border. but some how I keep seeing a entire page on the print window and it's probably going to print the entire thing.

Now I don't wanna be like using some PHP framework, I want to keep the whole project vanilla.

I tried a few answers on StackOverFlow where they were using JS but they are still showing the whole page, I even removed the headers and footer from the page, but I see the page title and number on the print window. I don't want all this white space titles and other description.

EDIT:

<?php include("../../../templates/head.php");
require_once("../../../.config/dbconfig.php");

if (isset($_GET['reportID'])) {
    $fetchedReportID = $_GET['reportID'];
    $sql = "SELECT * FROM opd_Reports WHERE reportID = $fetchedReportID";
    $result = mysqli_query($conn, $sql);
    $row = mysqli_fetch_assoc($result);


    date_default_timezone_set('Asia/Karachi');
    $currentDate = date('Y-m-d');

    if ($row) {
        $patientID = $row['patientID'];
        $patientName = $row['patientName'];
        $doctorName = $row['doctorName'];
        $reportName = $row['reportName'];
        $reportDate = $row['reportDate'];
        $reportFee = $row['reportFee'];
        $reportID = $row['reportID'];

        $sql = "SELECT * FROM opd_Patients WHERE patientID = $patientID;";
        $result = mysqli_query($conn, $sql);
        $row = mysqli_fetch_assoc($result);

        if ($row) {
            $patientMail = $row['patientMail'];
            $patientNumber = $row['patientNumber'];
            $patientAge = $row['patientAge'];
            $patientGender = $row['patientGen'];
            $patientCnic = $row['patientCnic'];
            $secretKey = $row['secretKey'];
        }?>
        <div class="w-full p-3 sm:p-5" id="printReceipt">
            <div class="mx-auto max-w-[440px] px-4">
                <div class="bg-white relative shadow-md rounded-lg border border-black overflow-hidden">
                    <div class="flex flex-col items-center justify-center w-[90%] mx-auto py-6">
                        <div class="mb-4 w-40 h-40 mx-auto">
                            <!--- Logo --->
                        </div>
                    </div>
                    <div class="px-8">
                        <div class="grid grid-cols-2 mb-3">
                            <h1 class="font-semibold text-start text-sm">Report ID: <span class="font-normal"><?php echo $reportID ?></span></h1>
                            <h1 class="font-semibold text-end text-sm">Report Date: <span class="font-normal"><?php echo $reportDate ?></span></h1>
                        </div>
                        <hr class="mb-3"/>
                        <div class="grid grid-cols-6 mb-6">
                            <h1 class="font-semibold col-span-3 text-start text-sm">Name: <span class="font-normal"><?php echo $patientName ?></span></h1>
                            <h1 class="font-semibold col-span-3 text-start ms-2 text-sm">Secret Key: <span class="font-normal">  <?php echo $secretKey ?></span></h1>
                        </div>
                        <div class="grid grid-cols-6 mb-6">
                            <h1 class="font-semibold col-span-3 text-start text-sm">CNIC: <span class="font-normal"><?php echo $patientCnic ?></span></h1>
                            <h1 class="font-semibold col-span-1 ms-1 text-center text-sm">Age: <span class="font-normal">  <?php echo $patientAge ?></span></h1>
                            <h1 class="font-semibold col-span-2 text-center text-sm">Gender: <span class="font-normal">  <?php echo $patientGender ?></span></h1>

                        </div>
                        <div class="grid grid-cols-2 mb-6">
                            <h1 class="font-semibold text-start text-sm">Fee: <span class="font-normal"> <?php echo $reportFee ?></span></h1>
                            <h1 class="font-semibold text-end text-sm">Receipt Date: <span class="font-normal"><?php echo $currentDate ?></span></h1>
                        </div>
                        <hr class="py-2">
                        <div class="grid grid-cols-1 mb-6">
                            <h1 class="font-semibold text-center text-sm">View Your Reports Here:<br><span class="font-normal">website url</span></h1>
                        </div>
                        <hr class="py-2">
                        <div class="grid grid-cols-1 mb-6">
                            <span class="font-normal text-xs">Thank you for choosing Digital Dental Diagnostics. If you have any
questions or concerns regarding your procedure or payment,
please contact us at [email protected] or
+1 (800) 123-4567.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="bg-black text-white px-4 py-2 rounded-lg font-semibold" onClick="printdiv('printReceipt');">Print</button>
        <script>
            function printdiv(elem) {
                var header_str = '<html><head><title>' + document.title  + '</title></head><body>';
                var footer_str = '</body></html>';
                var new_str = document.getElementById(elem).innerHTML;
                var old_str = document.body.innerHTML;
                document.body.innerHTML = header_str + new_str + footer_str;
                window.print();
                document.body.innerHTML = old_str;
                return false;
            }
        </script>
    <?php }
} else {
    echo '<h3 class="mb-2 text-xl font-bold text-orange-600">You Need To Upload/Select A Report First, Before You Can Print Receipt</h3>';
}
include ("../../../templates/footer.php");