add data to mongodb using jquery and php - php

Question

my HTML code
<section>
<div class="container " style="height: 55vh;">
<div class="row">
<div class="col-1 icon-content-wraper">
<h2> add products</h2>
</div>
</div>
<div class="row">
<div class="col-1">
<form id="form" action="newadd.php" method="post">
<div class="col-1 ">
add product:
<div class="input-container">
<input type="text" id="reference" name="reference" placeholder=" " required>
<label for="reference">Product reference number</label>
</div>
<div class="input-container">
<input type="text" id="stock_amount" name="stock_amount" placeholder=" " required>
<label for="stock_amount">Product stock amount</label>
</div>
<div class="input-container">
<input type="text" id="product_name" name="product_name" placeholder=" " required>
<label for="product_name">Product name</label>
</div>
Product cattegory: <div class="input-container">
<select class="sort" name="category" id="category">
<option value="1">Salty
<option value="2" selected="">Sweet
<option value="3" selected="">Chocolate
<option value="4" selected="">Sour
</select>
</div>
<div class="input-container">
<textarea id="description" name="description" rows="4" cols="50" required></textarea>
<span for="description">description</span>
</div>
<div class="input-container">
<input type="text" id="price" name="price" placeholder=" " required>
<label for="price">Product price</label>
</div>
<div class="input-container">
<input type="text" id="tax" name="tax" placeholder=" " required>
<label for="tax">Product tax</label>
</div>
<div class="input-container">
<input type="text" id="discount" name="discount" placeholder=" " required>
<label for="discount">Product discount</label>
</div>
</div>
<div class="col-1 mt-60">
<input id="Add" class="btn-standard" type="submit" name="Add" value="Add" />
</div>
</form>
</div>
</div>
</div>
</section>
<div class="article-progress-bar"></div>
<script type="text/javascript" >
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "newadd.php",
dataType:"json",
data:{
Reference:$("#reference").val(),
Stock: $("#stock_amount").val(),
ProductName: $("#product_name").val(),
Category: $("#category: selected").text(),
Description: $("#description").val(),
Price: $("#price").val(),
Tax: $("#tax").val(),
Discount: $("#discount").val()
},
success: function(response){
alert(response);
if (response == 1){
window.location="cms-view-products.php";
}
else if (response == 0){
alert("error to add data");
}
}
})
});
});
</script>
my PHP code
<?php
....
//Extract the data that was sent to the server
if($_SERVER['REQUEST_METHOD'] === 'POST'){
$reference = $_POST['reference'];
$stock = $_POST['Stock'];
$name = $_POST['ProductName'];
$category = $_POST['category'];
$description = $_POST['Description'];
$price = $_POST['Price'];
$tax = $_POST['Tax'];
$discount = $_POST['Discount'];
//Convert to PHP array
$dataArray = [
$Tag => [
"Reference" => $reference,
"StockAmount" => $stock
],
"Name" => $name,
"Description" => $description,
"Category" => $category,
"Tax" => $tax,
"Rating" => " ",
"Discount" => $discount,
"Price" => $price
];
//Add the new product to the database
$insertResult = $collection->insertOne($dataArray);
//Echo result back to user
if($insertResult->getInsertedCount()){
echo 1;
}
else {
echo 0;
}
}
else {
echo 'connection Error';
}
The error is that it adds null fields to the database plus:
Warning: Undefined array key "Stock" in C:\xampp\htdocs\newadd.php on line 19
Warning: Undefined array key "ProductName" in C:\xampp\htdocs\newadd.php on line 20
Warning: Undefined array key "Description" in C:\xampp\htdocs\newadd.php on line 22
Warning: Undefined array key "Price" in C:\xampp\htdocs\newadd.php on line 23
etc.