Get form input values with jQuery

HTML

<div class="demo-container">
<form id="demoForm" action="" method="post">
<div class="form-floating">
<input type="number" class="form-control" 
name="student_number" id="student_number" 
placeholder="" value="" autocomplete="off" required>
<label for="student_number">Student Number</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" 
name="first_name" id="first_name" 
placeholder="" value="" autocomplete="off" required>
<label for="first_name">First Name</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" 
name="last_name" id="last_name" 
placeholder="" value="" autocomplete="off" required>
<label for="last_name">Last Name</label>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg float-end" type="submit">Submit</button>
<div class="clearfix"></div>
</div>
</form>
<div class="student-table-container">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="student-table">
<tbody>
<tr>
<td rowspan="2" class="st-number"><span id="container-student-number">123456</span></td>
<td class="st-firstname"><span id="container-first-name">John</span></td>
</tr>
<tr>
<td><span id="container-last-name">Doe</span></td>
</tr>
</tbody>
</table>
</div>
</div>

CSS

.demo-container {
  max-width: 640px;
  margin: 4em auto;
  padding: 2em;
  }
.form-floating {
  margin-bottom: 1em;
  }
.form-floating label {
  color: rgba(159, 162, 166, 0.6);
  }
.student-table-container {
  margin-top: 2em;
  border: 1px solid rgba(159, 162, 166, 0.6);
  border-radius: 4px;
  }
.student-table td {
  padding: 2px 4px;
  }
.st-number {
  background-color: rgba(159, 162, 166, 0.6);
  width: 20%;
  text-align: center;
  }
.st-firstname {
  border-bottom: 1px solid rgba(159, 162, 166, 0.6);
  }

HTML

$(function() {
$("form#demoForm").on("submit", function(event) {
$.ajax({
type: "post",
url: "post.php",
data: $("form").serialize(),
dataType: "JSON",
success: function(data) {
$("#container-student-number").html("" + data.studentNumber + "");
$("#container-first-name").html("" + data.firstName + "");
$("#container-last-name").html("" + data.lastName + "");
}
});
event.preventDefault();
});
});

PHP

<?php
$student_number = $_POST["student_number"];
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
// 
$studentArray = array (
"studentNumber" => $student_number,
"firstName" => $first_name,
"lastName" => $last_name
);
// 
echo json_encode($studentArray);
?>

John Doe

S-123456