serializearray() does not take form fields - php

Question

I have index.php file which stores a form for user signup. But whenever I try to display data that is stored in the serializeArray it says that it is empty. Here is my code for the html form:
<form method="post" id="signupForm">
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" id="signupAlert" role="alert">
This is a danger alert—check it out!
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username" maxlength="30">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address" maxlength="50">
</div>
<div class="form-group">
<label for="password">Choose a Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" maxlength="30">
</div>
<div class="form-group">
<label for="passwordConfirm">Confirm Password</label>
<input type="password" class="form-control" id="passwordConfirm" placeholder="Confirm Password" maxlength="30">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input class="btn btn-primary" name="signup" type="submit" class="btn btn-primary" value="Sign Up">
</div>
</div>
</div>
</div>
</form>
In my index.js I have a function to take all form fields entered and store them in serializeArray.
$("#signupForm").submit(function(event){
event.preventDefault();
var data = $(this).serializeArray(data);
console.log(data)
})
The array results shows that there are no values. I have tried to console log any string to see if I have correctly linked my index.js file to index.php and it works. There is only problem with getting form fields into the array.
[]length: 0 proto: Array(0)