Есть ли способ, которым я могу динамически увеличивать количество элементов, отображаемых на html-странице, используя ajax, php и plain js

Question

Это то, что у меня есть

Файл JS:

var loadBtn = document.getElementById('loadButton');

loadBtn.addEventListener('click', fetchProducts);

let quantity = 3;

function fetchProducts() {

   quantity = quantity + 3;

   var xhr = new XMLHttpRequest;

   xhr.open('GET', `php/products.php?quantity=${quantity}`, true);

   xhr.onload = function () {
      if (this.status == 200) {
         var products = JSON.parse(this.responseText);

         var output, i;

         for (i = 0; i < products.length; i++) {
            output += `
                     <div id="pCard" class="p-card">
                           <p id="pName" class="p-name">${products[i].item_name}</p>
                           <p id="pAbout" class="p-about">${products[i].item_description}</p>
                     </div>
                     `;
         }

         document.getElementById('products').innerHTML = output;
      }
   }

   xhr.send();
}

Файл PHP:

include 'config.inc.php';

$quantity = $_GET['quantity'];

$sqlFetch = "SELECT id,item_name,item_description FROM items ORDER BY id ASC LIMIT $quantity";

$result = mysqli_query($connection, $sqlFetch);

$products = mysqli_fetch_all($result, MYSQLI_ASSOC);

echo json_encode($products);

Я ожидал, что после определения количества в файле js fetchProducts function увеличит количество продуктов и проанализирует с quantity по GET в файле php.Вместо этого это то, что я получаю от products.php:

Notice: Undefined index: quantity in C:\wamp64\www\simplesites\ss9_ajax\php\products.php on line 7