Using JavaScript Fetch() and formData() To Update A Database

I have some javascript fetch() on a project and, although it works, the issue I have is, (although I understand the basics of fetch and formData), the piece of code seems overly complicated for what it is doing, and I don’t understand how it is working?

I have some PHP that when a download button is clicked it updates a ‘downloads’ count in a MySQL database. I’ve included the PHP at the end, but it isn’t really relevant to the issue.

What I don’t understand is if the form button is assigned to a downloadButton variable, why the code is written how it is, particularly on the click event listener?

It would be amazing if someone could explain this to me and possibly show a better way of doing it using the downloadButton variable?

I’ve added code comments on the parts I don’t understand.

Also please feel free to explain this as if you are talking to an idiot – I am new to JavaScript/software development.

JavaScript

let forms = document.querySelectorAll('.download-form-js'),
    downloadButton = document.querySelectorAll('.dl-button')

// URL details
let myURL = new URL(window.location.href), // get URL
pagePath = myURL.pathname // add pathname to get full URL

if (forms) {
        forms.forEach(item => {
            
            // Why is it done like this when a variable is assigned to the download button above?
            item.querySelectorAll('[type="submit"], button').forEach( button => {
                button.addEventListener("click", e => item._button = button); //store this button in the form element?
            })

            // The 'btn' parameter in this function isn't used ?
            item.addEventListener("submit", function(evt, btn) {

                evt.preventDefault();

                const formData = new FormData(this);

                // Can the parameters inside the '.set()' function not be done with the 'downloadButton' variable?
                if (this._button) // submitted by a button?
                {
                    formData.set(this._button.name, this._button.value);
                    delete this._button; // have no idea why this is even used?
                }

            fetch (pagePath, {
                method: 'post',
                body: formData
            }).then(function(response){
                return response.text();
            // }).then(function(data){
            //     console.log(data);
            }).catch(function (error){
                console.error(error);
            })

        })

    })

} // end of if (forms)

PHP (not really relevant, but thought I’d include it)

Below is the PHP function that is used to update the downloads count but isn’t really relevant to the above problem.

function downloadCounter($connection, $imageID) {
    if (isset($_POST['download'])) {
         // value from hidden form element
         $imageID = $_POST['image-id'];

         try {
              $sql = "UPDATE lj_imageposts SET downloads = downloads +1 WHERE image_id = :image_id";
              $stmt = $connection->prepare($sql);

              $stmt->execute([
                   ':image_id' => $imageID
              ]);

         } catch (PDOException $e) {
              echo "Error: " . $e->getMessage();
         }
    }
}