Saving a generated QR code png but getting 404 Not Found error message

I am trying to generate a QR code from the value of a HTML input element:

HTML, CSS, and JS Code:

index.php

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <title>Send Email Example</title>
    <style>
        .center-block {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Generate QR Code</h5>

                    <form id="generateQrForm" class="form-signin">
                        <div class="form-label-group">
                            <label for="inputEmail">Text For QR <span style="color: #FF0000">*</span></label>
                            <input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Enter something to generate QR">
                        </div> <br/>
                       <div id="generatedQr text-center">
                            <img src="" id="generatedQrImg" class="center-block">
                        </div> <br/>
                        <button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block text-uppercase" >Generate QR</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <script type="text/javascript" src="generate_qr_js.js"></script>
  </script>

</body>

jQuery code:

generate_qr_js.js

$("form#generateQrForm").on("submit",function (e) {
   e.preventDefault();
    var qrText = $("#qrText").val();
    $.post("generate_qr_script.php",{generateQr:'generateQr',qrText:qrText},function (response) {
    var data = response.split('^');
    var generateQrImgPath = data[1];
    $("#generatedQrImg").attr("src",generateQrImgPath);
    })
});

PHP Code:

generate_qr_script.php

<?php
include "library/phpqrcode/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
    $qrText = $_POST['qrText']; // receive the text for QR
    $directory = "generated_qr/"; // folder where to store QR
    $fileName = 'QR'.rand().'.png'; // generate random name of QR image
    QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
    echo "success^".$directory.$fileName; // returns the qr-image path
}
?>

I run these 3 codes under one folder along with phpqrcode library that is imported in generate_qr_script.php file. When I go to the index.php website using XAMPP server, I get an error saying "404 Not Found" as shown below:

When I inspect the source code, the image source is generated successfully but it doesn't get shown on the web.

What I am trying to do is to generate a QR code that captures what the user inputs into the text box that is written in the HTML code. Ideally, it would be nice to store the barcode into the local computer file within the same folder but the code does not load the desired QR code png.

If anyone has any suggestions on where I am going wrong or has a better idea to generate a barcode please do let me know.

Solution

I think I fixed it by changing the file permission where I wanted to save the images somehow!